border的用法
2018-08-22 本文已影响0人
努力进化
用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
现在若是要个红色下标
即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的大小会发生什么变化
据观察
1.若top的border-width的大小变大，则会发现红色三角形的2条边和点往下移动，就是向下拉伸的既视感
2.同样right的border-width的大小变大，则会发现蓝色三角形向左边拉伸
3.left则是想右边拉伸
4.bottom则是想上拉伸
变小就是坍缩
若是想中间的点固定不动，则需要一个绝对定位。
做网页需要时可以用
div:after/befor
{
content="";
}
