如何用css3绘制梯形梯形

html-css017

如何用css3绘制梯形梯形,第1张

这就是一个梯形

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