用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的用法_绝对定位


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





border的用法_绝对定位_02


transparent.png


若改变border-width的大小会发生什么变化

据观察

1.若top的border-width的大小变大，则会发现红色三角形的2条边和点往下移动，就是向下拉伸的既视感

2.同样right的border-width的大小变大，则会发现蓝色三角形向左边拉伸

3.left则是想右边拉伸

4.bottom则是想上拉伸

变小就是坍缩

若是想中间的点固定不动，则需要一个绝对定位。

做网页需要时可以用


div:after/befor
{
content="";
}