画一个三角
画三角的方法很巧啊,用盒模型的边框来实现。
把盒子的宽高都设为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!