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);
}

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