可能有多个多边形吗？

Question

我正在尝试创建一个金字塔。 我想我会使用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

Answer 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>