Are multiple polygons possible?

时光怂恿深爱的人放手 提交于 2021-02-11 14:25:40

问题



I'm trying to create a pyramid. I figured I'd use the CSS clip-path for that. I meant to do a triangle (which I managed to do) and several trapezoids beneath it (even the first one failed).

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

Finally, here's the result :

I'm not working with any framework and I am using Firefox 67


回答1:


Use clip-path once then rely on gradient to simulate the different shapes:

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


来源:https://stackoverflow.com/questions/56539114/are-multiple-polygons-possible

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!