摘要：具體樣式如下繪制圖標三當我們能深入理解一些屬性的時候，實現(xiàn)一些復雜的圖標完全不是難事無非就是將簡單的圖形組合起來。

我們使用單個標簽繪制一個文件的圖標。HTML內容很簡單，就一句話。

右上角折疊三角采用after偽元素實現(xiàn)，左下角文字使用before偽元素實現(xiàn)。
主體部分當然還是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";
}

一切似乎很美好，我們如愿以償?shù)膶崿F(xiàn)了該有的效果：

但是：這個效果還是有問題：當我們把瀏覽器背景顏色修改之后就可以發(fā)現(xiàn)了。

那如何做才能使右上角的白色三角區(qū)域為透明色呢？

到了解決問題的時候了，想要解決這個問題就不能不提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屬性的時候，實現(xiàn)一些復雜的圖標完全不是難事（無非就是將簡單的圖形組合起來）。例如：可以使用border-radius畫出一個鷹嘴的形狀。

#test{
    width: 100px;
    height: 100px;
    /*background: green;*/
    margin: 30px auto 0;        
    border-top:30px solid red;
    /*實現(xiàn)鷹嘴效果*/    
    border-top-left-radius: 80px 80px;        
}

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