画一个三角

画三角的方法很巧啊,用盒模型的边框来实现。
把盒子的宽高都设为0。
先看一下边框到底怎么回事。把边框的上下左右的颜色弄不一样。看一眼就懂了。
画一个三角

        #box1 {
            width: 0;
            height: 0;
            border-width: 50px;
            border-top-color: red;
            border-bottom-color: yellow;
            border-left-color: blue;
            border-right-color: green;
            border-style: solid;
        }

你要是设置的有宽高,就是这回事了。
画一个三角
所以,当你想要一个三角形时,就看你想要哪个方向的了,然后把其他方向的颜色设为透明即可。

比如,我想要一个尖头朝上的三角。

        #box1 {
            width: 0;
            height: 0;
            border-width: 50px;
            border-color: transparent transparent red;
            border-style: solid;
        }

画一个三角
其他的就同理了~

bingo!

相关文章: