问题
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