CSS画一个三角形出来
具体原理实现
- 一个加了边框的DIV
- DIV边框的划分规则
1.CSS中的边框划分如图所示，只有这样才能公平划分top，left，right，bottom四条边
div{
width:100px;
height:100px;
background:skyblue;
border:50px solid black;
border-top-color:red;
border-left-color:yellow;
border-bottom-color:blue;
}
- 如果我们把DIV的高和宽都设置为0，那么我们就得到了四个三角形
div{
width:0;
height:0;
background:skyblue;
border:50px solid black;
border-top-color:red;
border-left-color:yellow;
border-bottom-color:blue;
}
3.如果把其中三条边的颜色设置为透明，那么我们就得到了一个标准的等腰三角形
div{
width:00px;
height:00px;
border:50px solid black;
border-top-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
}
4.通过把上边框的width设置为0px，得到这样的一个三角形
div{
width:00px;
height:00px;
border:50px solid black;
border-top-color:transparent;
border-left-color:blue;
border-right-color:transparent;
border-bottom-color:transparent;
border-top-width:0;
}
