<div style="width:200pxheight:0border-bottom: 100px solid pinkborder-top:0border-right: 100px solid transparentborder-left: 100px solid transparent"></div>
.div{height: 80px
width: 250px
background-color: #FFC800
margin: 50px
border-radius: 15px
transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0)
}
border-radius：12px
圆角 为零则为直角
梯形 [元素变形]
transform：
perspective [透视距离]
rotateX [横向.x轴旋转]
rotateY [竖向.Y轴旋转]
translateZ [Z轴移动,可以理解为放大和缩小]
了解这些基本的变形用法,就可以实现 【梯形】,
但复杂一些就没办法了，要用到SVG或Canvas，
<style>.trapezoid-bg {position: relative}
.trapezoid-bg::before {
content: ''
position: absolute
top: 0
right: 0
bottom: 0left: 0z-index: 0
transform: perspective(.5em) rotateX(-1deg)border: 1px solid #000
}
[class*=item] {height: 60px}
[class*=item]:not(:first-child)::before { border-top: none}
.item-1 {width: 300px }
.item-2 {width: 262px}
.item-3 {width: 230px}
.item-4 { width: 202px}
.flex-center {display: flexalign-items: centerjustify-content: center}
.flex-vertical { flex-direction: column}
</style>
<body>
<div class="flex-center flex-vertical">
<div class="trapezoid-bg flex-center item-1">hello world</div>
<div class="trapezoid-bg flex-center item-2">hello world</div>
<div class="trapezoid-bg flex-center item-3">hello world</div>
<div class="trapezoid-bg flex-center item-4">hello world</div>
</div>
</body>
