是否可以使用CSS创建此形状？

Question

我想知道如何才能仅通过css和css来制作这种形状，谢谢。

Answer 1

看看这个。

div {
-webkit-clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
background:red;
height:80px;
width:100px
}

<div><div>

Answer 2

您可以使用此：

-webkit-clip-path: polygon(0 79%, 70% 79%, 100% 100%, 0% 100%);
clip-path: polygon(0 79%, 70% 79%, 100% 100%, 0% 100%);

这是一个有用的网站，可以创建所需的形状： https://bennettfeely.com/clippy/

Answer 3

这种方式：

.trapz {
  margin: 10px; /* not necessary for the trapezoid */
  width: 300px;
  height: 0;
  border: none;
  border-right: 120px solid transparent;
  border-bottom: 100px solid red
}

<div class="trapz"> </div>