很多小伙伴在做開發(fā)的時(shí)候，遇到一些要畫很多形狀的時(shí)候，就很糾結(jié)了，知道怎么用CSS去布局，就是不知道怎么畫圖案。

其實(shí)使用CSS可以繪制出很多形狀，比如三角形，梯形，圓形，橢圓形等等，并不是只能畫矩形。

今天的教程，就來(lái)教大家怎么去用CSS繪制這些圖形吧。

為了方便大家去理解，今天分成基本形狀和組合形狀來(lái)一起講解吧，基本形狀是非常好理解的，再利用這些基本形狀進(jìn)行組合，就可以實(shí)現(xiàn)稍微復(fù)雜的組合形狀了。

基本形狀

三角形

梯形

圓形

橢圓

球體

半圓

菱形

組合形狀

心形

心形是由兩個(gè)圓形和一個(gè)矩形進(jìn)行組合得到的。

扇形

扇形是由一個(gè)圓形和一個(gè)矩形進(jìn)行組合得到的，用矩形遮住圓形的一部分就形成了扇形。

五邊形

五邊形是由一個(gè)三角形和一個(gè)梯形進(jìn)行組合得到的。

六邊形

六邊形是由兩個(gè)三角形和一個(gè)矩形進(jìn)行組合得到的。

長(zhǎng)方體

長(zhǎng)方體是由六個(gè)矩形進(jìn)行組合得到的。

圓柱體

圓柱體是由一個(gè)橢圓和一個(gè)圓角矩形進(jìn)行組合得到的。

棱錐

棱錐是由四個(gè)三角形和一個(gè)矩形進(jìn)行組合得到的。

最后

今天講的內(nèi)容里，有些可能大家會(huì)覺(jué)得有些比較難實(shí)現(xiàn)，其實(shí)你也可以使用?clip-path?這一個(gè)屬性，繪制各種形狀。

當(dāng)然，CSS能繪制的東西，遠(yuǎn)不止這些。還有許多東西今天一下子講不完，今天講的都是比較基礎(chǔ)的一些，對(duì)這個(gè)感興趣的小伙伴可以后面自己去探索一下。