CSS绘制图标（一）

我们使用单个标签绘制一个文件的图标。HTML内容很简单，就一句话。

<div id="doc"></div>

右上角折叠三角采用after伪元素实现，左下角文字使用before伪元素实现。
主体部分当然还是div#doc。

具体CSS样式如下：

#doc {  
    position: relative;    
    width: 155px;
    height: 200px;
    background: #0776ec;
    margin: 100px auto 0;
    border-radius: 10px;
}
#doc:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border:30px solid #59a8eb;
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-left-radius: 10px;
}
#doc:before {
    position: absolute;
    content: "CSS";
    bottom: 10px;
    left: 10px;
    color: #fff;
    font: 700 30px/30px "Microsoft YaHei";
}

一切似乎很美好，我们如愿以偿的实现了该有的效果：

但是：这个效果还是有问题：当我们把浏览器背景颜色修改之后就可以发现了。

那如何做才能使右上角的白色三角区域为透明色呢？

CSS绘制图标（二）

到了解决问题的时候了，想要解决这个问题就不能不提box-shadow这CSS属性了。

思路：还是使用after伪元素画出右上角的三角形，但是需要使其border-top-color和border-right-color为透明色，主体部分的蓝色使用after伪元素的box-shadow来模拟（给一个 很大的扩张半径）。

box-shadow: 0 0 0 180px #0776ec;

所以可以看到效果是这样的。

然后就好办了，因为box-shadow是不占位置的，将这个after伪元素直接定位到div#docx的右上（right:0;top:0;）角。接着给div#docx一个宽高值，然后用overflow:hidden属性将不必要的部分隐藏掉最后加一个圆角效果和文字就可以了。

这样一来，效果就符合我们的预期。
具体CSS样式如下：

body {
    background: pink;
}
#docx {
    position: relative;
    width: 155px;
    height: 200px;
    margin: 100px auto 0;
    border-radius: 10px;            
    overflow: hidden;
}
#docx:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border:30px solid #59a8eb;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-left-radius: 10px;
    box-shadow: 0 0 0 180px #0776ec;
}
#docx:before{
    z-index: 2;            
    position: absolute;
    content: "CSS";
    bottom: 10px;
    left: 10px;
    color: #fff;
    font: 700 30px/30px "Microsoft YaHei";
}

CSS绘制图标（三）

当我们能深入理解一些CSS属性的时候，实现一些复杂的图标完全不是难事（无非就是将简单的图形组合起来）。例如：可以使用border-radius画出一个鹰嘴的形状。

#test{
    width: 100px;
    height: 100px;
    /*background: green;*/
    margin: 30px auto 0;        
    border-top:30px solid red;
    /*实现鹰嘴效果*/    
    border-top-left-radius: 80px 80px;        
}

有了这个图形基础，将各个基础图形组合起来，就能实现我们想要的任何图标。例如：