圖標(biāo)不是有設(shè)計(jì)師在設(shè)計(jì)軟件中做嗎?為什么要用CSS來繪制圖標(biāo)呢兵拢？原因就是好玩兒唄说铃！而且同時(shí)還是加強(qiáng)我們的CSS熟練度以及考驗(yàn)我們的思考能力腻扇。何樂而不為呢幼苛。我們今天就一起來看看怎么用CSS繪制圖標(biāo)舌剂。
在這之前我們先來看幾個(gè)網(wǎng)友用CSS畫的圖標(biāo)
上面的這些圖標(biāo)都是用CSS3花出來的一汽，是不是很好玩兒，很有趣岩喷。非常的酷炫狂拽。想不想自己也試一試呢监憎？
好了，先來考慮一下用CSS畫圖標(biāo)的原理：
比如說一個(gè)矩形鲸阔，怎么用CSS來畫
我想這個(gè)對(duì)于大家來說是很簡單的，只要學(xué)習(xí)過CSS的肯定都能畫出來褐筛，我們稍微調(diào)整一下它的寬高类少，又能得到正方形了渔扎，線狀之類的圖形：
但是要畫一個(gè)三角形呢硫狞？
在早期的CSS中是沒有任何一個(gè)樣式是可以生成三角形或者是不規(guī)則之類的圖形的，后來就有人發(fā)現(xiàn)了邊框的奧秘晃痴。
先來給某個(gè)元素應(yīng)用邊框：
如果給這四個(gè)邊框都應(yīng)用不同的顏色：
我們會(huì)發(fā)現(xiàn)這些邊框的交界處是一條斜線愧旦，然后我們進(jìn)一步把元素的高度和寬度減少至零旁瘫，然后增加邊框的寬度：
樣式參考：
div{
width:0px;
height:0px;
border-top:150pxsolid blue;
border-bottom:150pxsolid black;
border-left:150pxsolid yellow;
border-right:150pxsolid green;
}
神奇的事情發(fā)生了稠屠，我們得到了是個(gè)尖對(duì)尖的三角形，把我們不需要的邊給去掉，然后就得到了一個(gè)三角形：
樣式參考;
div{
width:0px;
height:0px;
border-bottom:150pxsolid blue;
border-left:150pxsolid transparent;
border-right:150pxsolid transparent;
}
修改不同方向上邊框的厚度满俗，還能變換出各種角度的三角形
div{
width:0px;
height:0px;
border-bottom:150pxsolid blue;
border-left:0pxsolid transparent;
border-right:150pxsolid transparent;
}
畫完三角形，再來看一下如何畫圓：
我相信大家都知道在CSS3中，有border-radius這樣一個(gè)屬性蓄坏，圓角邊框：
border-radius不僅對(duì)邊框border起作用，對(duì)實(shí)體矩形也是有作用的脯倚。當(dāng)我們我們將圓角的值增大到一定的時(shí)候嵌屎，就會(huì)得到一個(gè)圓：
代碼參考：
div{
width:200px;
height:200px;
background:red;
border-radius:100px;
}
代碼參考：
div{
width:200px;
height:20px;
background:red;
border-radius:100px;
}
或者這樣的一個(gè)圓角條：
根據(jù)上面的基本圖形宝惰，組合一下尼夺，得到這樣一個(gè)圖標(biāo)：
所以這就是用CSS繪制圖標(biāo)的一個(gè)思路，一些很復(fù)雜的圖標(biāo)顷扩，我們將其拆開隘截，會(huì)發(fā)現(xiàn)它都是有一些基本的圖形構(gòu)成的婶芭。
接下來再來看一個(gè)比較有難度的
前面的三角形好說，大家現(xiàn)在應(yīng)該都會(huì)寫井赌，問題就在于后面的那個(gè)小彎構(gòu)仇穗。
我們來思考一下：
我們可以先從四分之一的圓角下手
將其中一邊的厚度減為零纹坐，就會(huì)得到這樣一個(gè)東西：
最后我們調(diào)整寬高再加上三角：
代碼參考：
上面給大家介紹的這些技巧都是非常標(biāo)準(zhǔn)的CSS特性舞丛，只有那些對(duì)CSS的各種特性觀察入微的人才有可能在非常規(guī)的狀態(tài)下將其發(fā)揮出來，完成那些不可能完成的任務(wù)球切。開動(dòng)腦子做起來吧！
網(wǎng)站介紹：http://one-div.com/
這個(gè)網(wǎng)站收集了作者自己制作的一些純CSS圖標(biāo)吨凑，這里面的圖標(biāo)有一個(gè)很大的特點(diǎn)都是用一個(gè)空的div來實(shí)現(xiàn)的非常厲害捍歪。推薦大家去看一下鸵钝。
