189 8069 5689
上下左右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: left;margin: 10px;
border-top: 30px red solid;
border-bottom: 30px blue solid;
border-left: 30px yellow solid;
border-right: 30px green solid;
}
#div1{width: 0;height: 0;}
#div2{width: 30px;height: 0;}
#div3{width: 30px;height: 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，
transfrom这个旋转元素的，无法绘制梯形=-=
可以用选择器来实现梯形，代码如下。
!DOCTYPE html
html
head
meta charset="utf8"
title555/title
style type="text/css"
dl dd { width:30px; height:30px; background:#000;}
dl dd:nth-child(1) { width:30px;}
dl dd:nth-child(2) { width:60px;}
dl dd:nth-child(3) { width:90px;}
dl dd:nth-child(4) { width:120px;}
dl dd:nth-child(5) { width:150px;}
dl dd:nth-child(6) { width:180px;}
dl dd:nth-child(7) { width:210px;}
dl dd:nth-child(8) { width:240px;}
/style
script type="text/JavaScript"
/script
/head
body
dl
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
/dl
/body
/html
width:0;
height:0;
border:75px solid;
border-top:none;
border-color:#F00;
border-right-color:transparent;