废话不多说，直接上代码！
#box{width:100px; height:150px;margin:200px auto; background:#06F; position:relative} #box:after{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;right:-30px; border-top: 75px solid transparent; border-left: 30px solid #06f; border-bottom: 75px solid transparent;} #box:before{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;left:-30px; background:#06f; border-top: 75px solid transparent; border-left: 30px solid #fff; border-bottom: 75px solid transparent;}
表现形式：
解析：
重要属性：transparent（透明的）
文中css我们可以看出图标，左边（before）我们设置了top和bottom都设置了75像素的border宽；left设置了宽30px；
其实就等价于：一个宽高为30x150的长方形！
有人会问，为什么会出现切割状的形状，不应该是上面和下面形状都是长方形吗，因为我们这里上下都等于75px，而这里的border-left就相当于给它加的宽为30px;就相当于从(0,0)开始到（30,75）进行切割，所以，然后就实现了一个四分之一的三角图标；
下面我们给每一块都加上不同的颜色，大家来看看！
#box{width:100px; height:150px;margin:200px auto; background:#06F; position:relative} #box:after{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;right:-30px; border-top: 75px solid #0cf; border-left: 30px solid #3FC; border-bottom: 75px solid #f00;} #box:before{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;left:-30px; background:#06f; border-top: 75px solid #f00; border-left: 30px solid #000; border-bottom: 75px solid #0cf;}
现在看起来是不是明了很多了，其实还可以实现很多形状，这个得靠自己去计算各种角度！
这种的好处就是和SVG差不多，不管放大多少都不会出现图标模糊；可以自己写几个常用的保存下来，以后直接运用到自己的网页中，还可以支持透明度转换的！
