小小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;
}
