梯形：
由此可见，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和方向来画出自己想要的三角形
一、定义一个盒子（“menu”）,用来装这个导航的。二、用无序列表（ul）中的列（li）放导航的内容。
三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。
四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:500px
margin:0 auto/*令盒子居中*/
font-size:20px /*定义字体的大小*/
}
ul{
margin:0padding:0/*把浏览器默认的间隔去掉*/
list-style:none /*把前面的序列号去掉*/
}
li{
float:left /*向左浮动，这个是实现水平的重要步骤！！*/
padding:0 15px /*li里面的字体和边框的距离*/
}
a{
text-decoration:none /*去掉超链接的下划线*/
color:#333 /*超链接的字体颜色*/
}
a:hover{
color:#696
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>
上下左右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>
