三角形

当元素宽高为 0 时，上下左右边框就会变成三角形

分 3 种情况：

1. 只设置两个边框时，会出现两个对角直角三角形
2. 设置三个边框时，对称的两个会变成对角直角三角
3. 设置四个边框时，是四个对心三角形

向上的等腰三角形

.triangle {
  width: 0;
  height: 0;
  /* transparent为透明色彩，左右透明，下面部分就是朝上的三角形 */
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid aqua;
}

四个对心三角形

.triangle0 {
  width: 0;
  height: 0;
  border-left: 50px solid #ffae00;
  border-right: 50px solid #ff00d4;
  border-top: 50px solid #00ffff;
  border-bottom: 50px solid #ff0062;
}

左上角三角形

.triangle1 {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-top: 50px solid aqua;
}