使用border绘制三角形

html中没有三角形标签，css也没有三角形属性。但熟悉css的border属性的人，如果border够宽就会形成类型三角形的东西。如下例子：

.border-half {
  width: 50px;
  height: 50px;
  border-top: 50px solid red;
  border-right: 50px solid black;
  border-bottom: 50px solid purple;
  border-left: 50px solid green;
}

上面每个方向的border很接近三角形了，如果盒子的宽高为0，那么border就是完全的三角形。如下:

.border-full {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid black;
  border-bottom: 100px solid purple;
  border-left: 100px solid green;
}

如果只保留一个方向的border就会得到一个三角形，这里只例举了左边其它方向是一样的道理。如下：

.triangle .left {
  border-top: 80px solid transparent; //与三角形方向的相邻的两个方向可以改变三角形形状
  border-bottom: 80px solid transparent;
  border-left: 80px solid green; //需要的方向上必须有颜色
}
.triangle .left1 {
  border-top: 0 solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 80px solid green;
}

.triangle .left2 {
 border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 70px solid green;
}

使用clip-path裁剪三角形

除了使用border绘制三角形我们还可以使用clip-path裁剪出三角形

.filter-tri {
  width: 100px;
  height: 100px;
  background: green;
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

使用mask遮罩裁剪三角形

.mask-tri {
  width: 100px;
  height: 100px;
  background: green;
  mask: linear-gradient(45deg, #fff 0, #fff 50%, transparent 50%, transparent 100%)
}

本编文章的代码都在示例中，有需要请前往获取。