玩转CSS小三角

border边框语法：

• border 四条边框设置
• border-left 设置左边框，一般单独设置左边框样式使用
• border-right 设置右边框，一般单独设置右边框样式使用
• border-top 设置上边框，一般单独设置上边框样式使用
• border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用

---

一、先玩玩

1、首先让div1的每条bordor都为50px，效果如下：

<style type="text/css">
#div1{
	border-left: 50px solid yellow;
	border-right: 50px solid red;
	border-top: 50px solid blue;
	border-bottom: 50px solid purple;
}
</style>

<div id="div1">adas</div>

如果我去掉div1中间的字呢，那就长这样了：

2、如果我接着上面，把width，height都设置为0,就长这样了：