<style>
html,body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: rgb(73, 19, 19);
}
.blue-trapezoid {
width: 800px;
border-top: 100px solid rgb(147, 65, 240);
}
.pink-trapezoid {
width: 600px;
margin-left: 100px;
border-top: 100px solid pink;
}
.red-trapezoid {
width: 400px;
margin-left: 200px;
border-top: 100px solid red;
}
.yellow-trapezoid {
margin-left: 300px;
width: 200px;
border-top: 100px solid yellow;
}
.green-trapezoid {
margin-left: 400px;
width: 0px;
border-top: 100px solid green;
}
.common{
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.body{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="body">
<div class="center-div">
<div class="blue-trapezoid common"></div>
<div class="pink-trapezoid common"></div>
<div class="red-trapezoid common"></div>
<div class="yellow-trapezoid common"></div>
<div class="green-trapezoid common"></div>
</div>
</div>
</body>
css画倒金字塔
于 2020-03-19 14:03:11 首次发布