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;
}

2. 如果我们把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;
}

转载请注明来源