多个多边形可能吗？答案

【问题标题】：Are multiple polygons possible?多个多边形可能吗？
【发布时间】：2019-06-16 02:59:17
【问题描述】：

我正在尝试创建一个金字塔。我想我会为此使用 CSS clip-path。我打算做一个三角形（我设法做到了）和它下面的几个梯形（甚至第一个都失败了）。

.container {
  min-width: 50%;
  max-width: 50%;
}

.triangle {
  background-color: yellow;
  clip-path: polygon(90% 100%, 50% 0%, 10% 100%);
}

.trapeze {
  background-color: blue;
  clip-path: polygon(0% 10%, 0% 90%, 0% 100%, 100% 100%);
}

div {
  min-height: 200px;
  max-height: 200px;
  border-color: black;
  border-style: solid;
}

<div class="container">
  <div class="triangle"></div>
</div>
<div class="container">
  <dic class="trapeze"> </dic>
</div>

最后，结果如下：

我没有使用任何框架，我使用的是 Firefox 67

【问题讨论】：

如果您的 html 是您实际拥有的，请注意您的梯形 div 元素被错误命名为 dic
这样好多了。但是，我的梯形仍然不是梯形。谢谢。
您的剪辑路径顺序可能需要更改。查看bennettfeely.com/clippy 并选择梯形示例，它建议您的剪辑路径应该类似于 10% 0%、90% 0%、100% 100%、0% 100%

标签： css polygon css-shapes clip-path

【解决方案1】：

使用clip-path一次，然后依靠渐变来模拟不同的形状：

.pyramid {
  width:200px;
  height:200px;
  
  -webkit-clip-path:polygon(0 100%,100% 100%, 50% 0);
  clip-path:polygon(0 100%,100% 100%, 50% 0);
  background:
    linear-gradient(to bottom,
      yellow 0    20%,
      red    20%  50%,
      blue   50% 100%);
}

<div class="pyramid">

</div>

【讨论】：

这实际上比我想出的要好得多。谢谢