I.Jokhadze I.Jokhadze - 1 month ago 7
CSS Question

How can i make div shape like this with css?



i'm making special boxes with shape like this, i don't know how to draw this with css

Answer

You can first create rectangle with border-radius and add triangle with :after pseudo-element.

.shape {
  width: 200px;
  height: 50px;
  background: #B67025;
  margin: 50px;
  border-radius: 25px;
  position: relative;
}
.shape:after {
  content: '';
  position: absolute;
  border-style: solid;
  right: 0;
  top: 50%;
  border-width: 10px 0 10px 10px;
  transform: translate(80%, -50%);
  border-color: transparent transparent transparent #B67025;
}
<div class="shape"></div>

Comments