html - 我怎样才能用CSS制作这样的div形状？

Question

<分区>

Answer 1

您可以先使用border-radius 创建矩形，然后使用:after 伪元素添加三 Angular 形。

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