绘制三角形

方式一：

div {
  width: 0;
  height: 0;
  border-top: 250px solid transparent;
  border-left: 250px solid transparent;
  border- bottom: 250px solid #ed1250;
  border-right: 250px solid transparent;
  margin: 40px auto;
}

方式二：

方式一的简化版

div {
  width: 0;
  height: 0;
  border: 250px solid transparent;
	border-bottom-color: #ed1250;
  margin: 40px auto;
}

方式三：

div {
  height: 100px;
  width: 100px;
  /* 从左下到右上，从蓝色开始渐变、到50%位置是透明色渐变开始、最后以透明色结束 */
  background: linear-gradient(45deg, blue, blue 50%, transparent 50%, transparent 100%);
  transform: rotate(135deg);
}

方式四：

div {
  height: 100px;
  width: 100px;
  background: blue;
  /* polygon定义多边形，每对参数表示多边形的顶点坐标(x y)，也就是连接点 */
  clip-path: polygon(50% 50%, 100% 100%, 0 100%);
}