CSS实现倒三角和对钩效果

先上效果图：

注： 这里只对 三角形 和 对钩 的样式进行整理和说明。

倒三角实现（css代码部分）：

原理：宽高设为0，用各边框的尺寸和颜色来控制三角形状.

.triangle{
  display: block;
  width: 0px;
  height: 0px;
  border-left: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #FF5954;
  border-top: 15px solid #FF5954;
}

对钩的实现（css代码部分）：

原理：通过给块级元素设置宽高，并设置相邻元素的边框，然后进行旋转一定角度.

.check{
  display: block;
  width: 6px;
  height: 12px;
  border-color:#fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

此方法的好处：
既不用引用字体图标，也不用加载额外的图片，节省了网络开销并提升了页面加载速度。