我怎样才能用css制作这样的div形状？

Question

我正在制作这样形状的特殊盒子，我不知道如何用 css 绘制它

Answer 1

您可以首先border-radius使用:after伪元素创建矩形并添加三角形。

.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>