可能有多个多边形吗? [英] Are multiple polygons possible?
本文介绍了可能有多个多边形吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个金字塔.我认为我会为此使用CSS clip-path
.我打算做一个三角形(我设法做到了),并在它下面做了几个梯形(甚至第一个也失败了).
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>
最后,结果如下:
我没有使用任何框架,并且正在使用Firefox 67
I'm not working with any framework and I am using Firefox 67
推荐答案
使用 clip-path
一次,然后依靠渐变来模拟不同的形状:
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>
这篇关于可能有多个多边形吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文