小小border用处多

1.实现梯形

利用边框我们可以得到梯形，首先我们给一个div添加边框，当给边框设置四个不同的颜色时，我们可以得到这样的样式，可以看到这里上边框是一个梯形，那么如果我们给其他边框设置颜色为透明(transparent)，就可以得到一个梯形了。梯形的高便是边框的宽度设置。

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div>
 </div>
</body>
</html>

div{
 width:100px;
 height:100px;
 margin:80px auto;
 /*border-top:50px solid pink;
 border-left:50px solid grey;
 border-right:50px solid #FFE767;*/
 /*border-top:50px solid transparent;
 border-left:50px solid transparent;
 border-right:50px solid transparent;
 border-bottom:50px solid #57BA63;*/
 border-top:50px solid pink;
 border-left:50px solid blue;
 border-right:50px solid purple;
 border-bottom:50px solid gray;
 
}

2.实现三角形

借助于border实现梯形的思想，如果div内容区域为0，梯形就可以变成三角形了，即只要将div的width和height都设置为0 ，border根据需要设置透明度即可。

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div>
 </div>
</body>
</html>

div{
 width:0px;
 height:0px;
 margin:80px auto;
 /*border-top:50px solid pink;
 border-left:50px solid grey;
 border-right:50px solid #FFE767;*/
 border-top:50px solid transparent;
 border-left:50px solid transparent;
 border-right:50px solid transparent;
 border-bottom:50px solid #57BA63;
}

3.直角三角形

法一：去掉左边框影响上边框三角形构成的左边界
div{
width:0px;
height:0px;
margin: 80px auto;
border-top: 100px solid pink;
border-left: 0px solid transparent; //重点在这里，不设置左边框
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}

法二：上边框构成的三角形和左边框构成的三角形组合成一个直角三角形

div{
width:0px;
height:0px;
margin: 80px auto;
border-top: 100px solid pink;
border-left: 100px solid pink;//把透明变粉色
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}