用border画有边框的三角形

• 下边这种图每个三角形是怎么画的呢？其实它并不是一个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;
}

这样就画出了一个黑色边框的三角形~