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

我們使用單個(gè)標(biāo)簽繪制一個(gè)文件的圖標(biāo)。HTML內(nèi)容很簡單，就一句話。

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

一切似乎很美好，我們?nèi)缭敢詢數(shù)膶?shí)現(xiàn)了該有的效果：

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

那如何做才能使右上角的白色三角區(qū)域?yàn)橥该魃兀?/p> CSS繪制圖標(biāo)（二）

到了解決問題的時(shí)候了，想要解決這個(gè)問題就不能不提box-shadow這CSS屬性了。

思路：還是使用after偽元素畫出右上角的三角形，但是需要使其border-top-color和border-right-color為透明色，主體部分的藍(lán)色使用after偽元素的box-shadow來模擬（給一個(gè) 很大的擴(kuò)張半徑）。

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

所以可以看到效果是這樣的。

然后就好辦了，因?yàn)?b>box-shadow是不占位置的，將這個(gè)after偽元素直接定位到div#docx的右上（right:0;top:0;）角。接著給div#docx一個(gè)寬高值，然后用overflow:hidden屬性將不必要的部分隱藏掉最后加一個(gè)圓角效果和文字就可以了。

這樣一來，效果就符合我們的預(yù)期。
具體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";
}

當(dāng)我們能深入理解一些CSS屬性的時(shí)候，實(shí)現(xiàn)一些復(fù)雜的圖標(biāo)完全不是難事（無非就是將簡單的圖形組合起來）。例如：可以使用border-radius畫出一個(gè)鷹嘴的形狀。

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

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