iT邦幫忙

0

利用CSS3 clip-path繪製不規則形狀

WM 2019-06-10 09:00:35243 瀏覽

製作網頁的過程,如需要一些特殊形狀(梯形、橢圓形、不規則多邊形),一般會想到使用SVG來處理,但有時我們只是需要簡單的形狀,而且學習SVG是有門檻存在的,這時,可以利用CSS3的clip-path來繪製較複雜的形狀。

以下的教學會配合https://bennettfeely.com/clippy/,這個非常好的網站來教學。

我們可以藉由拖拉的方式,繪製所需的圖型,然後將產生的CSS程式碼直接套用在自己的網頁上。

進入網站,一開始會看到三角形的圖案,下面黑色區塊就是CSS程式碼。
https://ithelp.ithome.com.tw/upload/images/20190610/20112573d0EehVRp3g.png

圖型產生的原理

藉由座標位置的點,點與點連成線,再由線所圍成的範圍,來完成的。
以上圖三角形為例,紅點對應CSS紅色程式碼,綠點對應綠色,黃點對應黃色。
並且按照逆時針的方向,將點線面所圍起來的區域,就是我們要的三角形。

判斷座標位置

我們所繪製的圖型,會限定在一個區塊內,而這個區塊通常會是DIV元素。
DIV元素所產生的區塊會是方形,有4個角。
以左上角為X、Y軸的起始點(X Y)。
X軸是水平,Y軸是垂直。
https://ithelp.ithome.com.tw/upload/images/20190610/20112573xPwCEJRNYq.png
紅點位置為起始點(0 0)。
綠點位置位於X軸最左邊,Y軸最下面,所以是(0% 100%)。
黃點位置位於X軸最右邊,Y軸最下面,所以是(100% 100%)。
這樣應該很好理解。

那如果是等腰三角形呢?
https://ithelp.ithome.com.tw/upload/images/20190610/20112573EioyYGHpiP.png
很簡單,唯一會移動的只有紅點。
將它移動到X軸的中央(50% 0),就會產生等腰三角形了。

產生多邊形

https://ithelp.ithome.com.tw/upload/images/20190610/20112573EgQVopCkRm.png
以梯形為例,多了一點(藍點),同樣地,以紅點為起始點,這次是順時針,依序為紅、綠、黃、藍。
紅點像右移動了20%的位置,綠點向右移動了80%的位置。黃、藍則是位於最角落。
由這4點順時針所圍成的區域,就是梯形。

順時針、逆時針

從一開始就一直出現順時針或逆時針,那是因為當你決定一個方向時,就應當按照當初所訂定的方向圍繞。
不然會出現非預期的形狀。
譬如,如果將黃、藍的位置對調,就會變成這樣。
https://ithelp.ithome.com.tw/upload/images/20190610/20112573oPvKpx2IAc.png
程式碼是按照紅、綠、黃、藍排下來的,所以線的連結,綠點之後是接黃點,類似阿拉伯數字的8。
最後一點(藍),結束之後,自然會連回紅點,才能圍成一個封閉區域。

更複雜的多邊形

並非所有的點,都要在框框的邊界上。
我們可以在範圍內,訂定任何位置的點。
https://ithelp.ithome.com.tw/upload/images/20190610/20112573vX7OSeMfLL.png
這是由紅點出發,順時針所圍成的箭頭。
綠點跟白點,就不是在邊界上了。

圓形

相對於多邊形,圓形簡單許多。
https://ithelp.ithome.com.tw/upload/images/20190610/20112573k4lwZquenC.png
綠點,圓心位置。
紅點,半徑大小。
一樣都是由百分比來表示的。


尚未有邦友留言

立即登入留言