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