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，
上下左右4条边，最关键的一点：每两条边的相交处是斜线的相交的。
如果不渲染成斜线，那么写浏览器内核解析css的程序员要纠结了：上边该压着左边线还是右边线，谁压谁都不合理啊，最简单的是弄成斜线等分，还不必去写判断谁该压着谁的程序代码。
于是，就给用边框创造梯形、三角形留下了空间，其他三条边颜色设置为透明或none，剩下的就是梯形或三角了，至于直角梯形，第6个div是，观察第4个div的 none 起了什么作用，再看div6，相信你就明白了。上图的代码：
<div id="div1">1</div><div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
<style>
div{
float: leftmargin: 10px
border-top: 30px red solid
border-bottom: 30px blue solid
border-left: 30px yellow solid
border-right: 30px green solid
}
#div1{width: 0height: 0}
#div2{width: 30pxheight: 0}
#div3{width: 30pxheight: 30px}
#div4{
width: 30px
border-top: none
}
#div5{
border-top: transparent 30px solid
border-bottom: 30px blue solid
border-left: transparent 30px solid
border-right: transparent 30px solid
}
#div6{
width: 50px height: 0
border-top: none
border-bottom: 40px blue solid
border-left: transparent 30px solid
border-right: none
}
</style>
