- 下边这种图每个三角形是怎么画的呢?其实它并不是一个div,而是用设置了宽度的border画的
- 原理:一个border是由上下左右四个小三角形组成的,它的宽度就是下边这个正方形的边长
- 代码如下:
<div id="triangle"></div>
#triangle {
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: blue yellow red green;
}
- 弄清楚原理,一切就简单了,比如我如果想要得到一个朝上的三角形,只需把其它三个方向的三角形颜色设成transparent即可:
#triangle {
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent transparent red;
}
这样就得到了一个朝上的三角形:
- 继续,我想要一个有边框的三角形咋整?三角形本身就是border画的,不能再给它设置border了啊,别急,很简单,俩三角形叠加在一起不就成了嘛~利用好position定位
<div id="demo"></div>
#demo{
width:0;
height:0;
position:relative;
border-top:solid 50px transparent;
border-right:solid 50px black; /* 黑色大三角形 */
border-bottom:solid 50px transparent;
}
#demo:after{
content:"";
width:0;
height:0;
position:absolute;
left:3px;
top:-45px;
border-top:solid 45px transparent;
border-right:solid 45px white; /* 白色小三角形 */
border-bottom:solid 45px transparent;
}
这样就画出了一个黑色边框的三角形~