CSS 实现三角形

 第一种方式（利用border实现）：

.box {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 50px solid yellowgreen;
}

1.将border全部设置成透明色。

2.然后将底部的border设置成颜色即可。 

第二种方式（使用 linear-gradient 绘制三角形）：

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, red 50%, transparent 50%);
}

 linear-gradient 属性第一个值为角度，red 占50%，transparent 为50% 也就是透明色。

第三种方式（transform: rotate 配合 overflow: hidden 绘制三角形）：

div {
  width: 141px;
  height: 100px;
  margin: auto;
}

.box {
  position: relative;
  background: unset;
  overflow: hidden;
  
  &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: deeppink;
      transform-origin: left bottom;
      transform: rotate(45deg);
      z-index: -1;
  }
}

第四种方法（利用字符绘制三角形）：

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

<div class="normal"> &#9668;  </div>

div {
  font-size: 100px;
  color: deeppink;
}

1. 利用字符显示三角形

2.只需要给它加上颜色的文字大小即可。