CSS画出三角形（利用Border）

CSS画出三角形（利用Border）

画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。

如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。

        div{
            width: 200px;
            height: 100px;
            border-left: 50px solid yellow;
            border-right: 50px solid blue;
            border-top: 50px solid red;
            border-bottom: 50px solid black;
        }

 

这个时候如果将盒模型内部的height，width调为0px，根据颜色（transparent）组合成不同的三角形。

        div{
            width: 0px;
            height: 0px;
            border-left: 50px solid yellow;
            border-right: 50px solid blue;
            border-top: 50px solid red;
            border-bottom: 50px solid black;
        }

 

最少需要两条边才能构成一个三角形

div{

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-top: 100px solid red;

}

 

posted @ 2018-11-21 13:39 Ruoh3kou 阅读(...) 评论(...) 编辑 收藏