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

有了這個圖形基礎，將各個基礎圖形組合起來，就能實現咱們想要的任何圖標。例如：