废话不多说，直接上代码！

<div id="box"></div>

<style type="text/css">
#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;}
</style>

表现形式：
解析：
重要属性：transparent（透明的）
文中css我们可以看出图标，左边（before）我们设置了top和bottom都设置了75像素的border宽；left设置了宽30px；
其实就等价于：一个宽高为30X150的长方形！

有人会问，为什么会出现切割状的形状，不应该是上面和下面形状都是长方形吗，因为我们这里上下都等于75px，而这里的border-left就相当于给它加的宽为30px;就相当于从(0,0)开始到（30,75）进行切割，所以，然后就实现了一个四分之一的三角图标；

下面我们给每一块都加上不同的颜色，大家来看看！

<div id="box"></div>

<style type="text/css">
#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;}
</style>

现在看起来是不是明了很多了，其实还可以实现很多形状，这个得靠自己去计算各种角度！
这种的好处就是和SVG差不多，不管放大多少都不会出现图标模糊；可以自己写几个常用的保存下来，以后直接运用到自己的网页中，还可以支持透明度转换的！