我怎样才能创建这样的形状？

Question

我如何用 css 创建这个？

感谢您的帮助。

我尝试过的：

.box {
  background: purple;
  padding: 20px;
  clip-path: polygon(
    70% 100%,
    100% calc(100% - 3vw),
    100% 0,
    0 0,
    0 calc(100% - 3vw)
  );
}

<div class="box"></div>

Answer 1

尝试两个剪辑路径：

.box {
  height:100px;
  position:relative;
}

.box::before,
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
}
.box::before {
  bottom:0;
  background:red;
  clip-path:polygon(0 0,100% 0,100% 60%,85% 100%,0 40%);
}

.box::after {
  bottom:20%;
  background:black;
  clip-path:polygon(0 0,100% 0,100% 55%,85% 100%,0 50%);
}

<div class="box"></div>