教你用CSS玩轉各類形狀？

不少小夥伴在作開發的時候，遇到一些要畫不少形狀的時候，就很糾結了，知道怎麼用CSS去佈局，就是不知道怎麼畫圖案。

其實使用CSS能夠繪製出不少形狀，好比三角形，梯形，圓形，橢圓形等等，並非只能畫矩形。

今天的教程，就來教你們怎麼去用CSS繪製這些圖形吧。

爲了方便你們去理解，今天分紅基本形狀和組合形狀來一塊兒講解吧，基本形狀是很是好理解的，再利用這些基本形狀進行組合，就能夠實現稍微複雜的組合形狀了。

基本形狀

三角形

梯形

圓形

橢圓

球體

半圓

菱形

組合形狀

心形

心形是由兩個圓形和一個矩形進行組合獲得的。

扇形

扇形是由一個圓形和一個矩形進行組合獲得的，用矩形遮住圓形的一部分就造成了扇形。

五邊形

五邊形是由一個三角形和一個梯形進行組合獲得的。

六邊形

六邊形是由兩個三角形和一個矩形進行組合獲得的。

長方體

長方體是由六個矩形進行組合獲得的。

圓柱體

圓柱體是由一個橢圓和一個圓角矩形進行組合獲得的。

棱錐

棱錐是由四個三角形和一個矩形進行組合獲得的。

最後

今天講的內容裏，有些可能你們會以爲有些比較難實現，其實你也可使用 clip-path 這一個屬性，繪製各類形狀。

固然，CSS能繪製的東西，遠不止這些。還有許多東西今天一會兒講不完，今天講的都是比較基礎的一些，對這個感興趣的小夥伴能夠後面本身去探索一下。