使用CSS画个图标

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

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