不少小夥伴在作開發的時候,遇到一些要畫不少形狀的時候,就很糾結了,知道怎麼用CSS去佈局,就是不知道怎麼畫圖案。web
其實使用CSS能夠繪製出不少形狀,好比三角形,梯形,圓形,橢圓形等等,並非只能畫矩形。微信
今天的教程,就來教你們怎麼去用CSS繪製這些圖形吧。app
爲了方便你們去理解,今天分紅基本形狀和組合形狀來一塊兒講解吧,基本形狀是很是好理解的,再利用這些基本形狀進行組合,就能夠實現稍微複雜的組合形狀了。佈局
基本形狀flex
三角形
spa
梯形3d
圓形orm
橢圓cdn
球體blog
半圓
菱形
組合形狀
心形
心形是由兩個圓形和一個矩形進行組合獲得的。
扇形
扇形是由一個圓形和一個矩形進行組合獲得的,用矩形遮住圓形的一部分就造成了扇形。
五邊形
五邊形是由一個三角形和一個梯形進行組合獲得的。
六邊形
六邊形是由兩個三角形和一個矩形進行組合獲得的。
長方體
長方體是由六個矩形進行組合獲得的。
圓柱體
圓柱體是由一個橢圓和一個圓角矩形進行組合獲得的。
棱錐
棱錐是由四個三角形和一個矩形進行組合獲得的。
最後
今天講的內容裏,有些可能你們會以爲有些比較難實現,其實你也可使用 clip-path 這一個屬性,繪製各類形狀。
固然,CSS能繪製的東西,遠不止這些。還有許多東西今天一會兒講不完,今天講的都是比較基礎的一些,對這個感興趣的小夥伴能夠後面本身去探索一下。