前端設計是經常會使用包括圓形、三角形等圖形樣式來增添網頁布局的多樣性,藉以營造網頁布局的美感。然而使用傳統CSS方式來刻畫出圓形及三角形並不容易,甚至在使用過程中經常導致有破版的情況。對於有類似困擾的前端工程師來說,CSS clip-path maker的產生簡直是一大福音。前端工程師只要將相關的程式碼貼到CSS檔案中,就可以輕鬆變化出多個不同的樣式。
舉例來說,今日想要製造出一個三角形的圖案。就在CSS clip-path maker選取三角形的樣式。
此時下方會出現 clip-path: polygon(50% 0%
, 0% 100%
, 100% 100%
);等字樣,並將相關字樣COPY在Codepn CSS中檔案引用。
歡迎來到「法洛威」,這是一個追求成長與分享財務、法律及資訊的平台,讓我們一起共同成長。