纯CSS写三角形样式集合（原理解析）

一、实现原理

在css3中，我们主要使用的是一个transparent的属性，意思是透明的，比如我们将字体设置为黑色会写color：black，那么如果想把字体的颜色设置为透明，我们可以写color：transparent。同理background-color：transparent可以设置背景为透明。

二、 8种三角形实现实例

1.triangle up 上三角形

#triangle-up{
  width:0;
  height:0;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-bottom:100px solid black;
}

2.triangle down 下三角形

#triangle-down{
  width:0;
  height:0;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:100px solid black;
}

3.triangle left 左三角形

#triangle-left{
  width:0;
  height:0;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-right:100px solid black;
}

4.triangle right 右三角形

#triangle-right{
  width:0;
  height:0;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-left:100px solid black;
}

5.triangle top left 左上三角形

#triangle-topleft{
  width:0;
  height:0;
  border-top:100px solid black;
  border-right:100px solid transparent;
}

6.triangle top right 右上三角形

#triangle-topright{
  width:0;
  height:0;
  border-top:100px solid black;
  border-left:100px solid transparent;
}

7.triangle bottom left 左下三角形

#triangle-bottomleft{
  width:0;
  height:0;
  border-bottom:100px solid black;
  border-right:100px solid transparent;
}

8.triangle bottom right 右下三角形

#triangle-bottomright{
  width:0;
  height:0;
  border-bottom:100px solid black;
  border-left:100px solid transparent;
}