是否可以用css创建这个形状？ [重复]

Question

这个问题在这里已有答案：

• Shape with a slanted side (responsive) 3回答

我想知道我怎么能只用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>