用border完成一個三角形下標
1.首先來看看border的屬性意義。
三個屬性分別分： border-width , border-style , border-color
<style>
div{
width: 0;
height: 0;
background: red;
border-top:100px solid red;
border-right: 100px solid blue;
border-bottom: 100px solid black;
border-left:100px solid yellow;
}
</style>
</head>
<body>
<div>
</div>
</body>
border.png
現(xiàn)在若是要個紅色下標
即right，bottom，left的color設置為transparent（隱藏）。
div{
width: 0;
height: 0;
border-top:100px solid red;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left:100px solid transparent;
}
transparent.png
若改變border-width的大小會發(fā)生什么變化
據(jù)觀察
1.若top的border-width的大小變大，則會發(fā)現(xiàn)紅色三角形的2條邊和點往下移動，就是向下拉伸的既視感
2.同樣right的border-width的大小變大，則會發(fā)現(xiàn)藍色三角形向左邊拉伸
3.left則是想右邊拉伸
4.bottom則是想上拉伸
變小就是坍縮
若是想中間的點固定不動，則需要一個絕對定位。
做網(wǎng)頁需要時可以用
div:after/befor
{
content="";
}
