可以用css创建这个形状吗？ [复制]

【问题标题】：Is it possible to create this shape with css? [duplicate]可以用css创建这个形状吗？ [复制]
【发布时间】：2019-04-20 01:57:05
【问题描述】：

我想知道如何仅使用 css 和 css 制作这个形状，提前谢谢。

【问题讨论】：

你尝试了什么？请在提出任何问题之前，先努力解决问题并提及步骤。
剪辑路径支持受限caniuse.com/#search=clip-path

标签： css css-shapes

【解决方案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
}

&lt;div&gt;&lt;div&gt;

【讨论】：

【解决方案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/

【讨论】：

【解决方案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
}

&lt;div class="trapz"&gt; &lt;/div&gt;

【讨论】：