上下左右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>
首先,我们画一个div,给div加上border,看看盒子模型本来的样子
梯形:
由此可见,css绘制的梯形并不是一个容器,只是容器的一条边。css把容器的其余三条边设置为透明的,只显示需要的一条边,就是一个梯形了。
直角梯形
三角形
盒子模型分为两种,一种是border-box,一种是center-box。低版本的ie中是border-box,在新的浏览器中,我们可以把容器的宽高设计为0或者特地设置box-sizing: border-box。
来看看border-box的效果:
由此可见,当设置为border-box时,border的大小包含在容器大小之内,我们可以通过显示某条边来制作三角形
border-box画直角三角形
center-box:
与border-box一样,可以根据控制border的width和方向来画出自己想要的三角形
.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,