過去瀏覽器還尚未完整支援CSS3,得靠繪圖軟體繪製圖形轉存成圖片,在置入網站中,繪製與修改過程不僅費工費時,過多的零碎圖片檔案也會影響到網頁空間與流量;尤其現今網站搜尋以行動優先設計為主,優化與加速網站就變得很重要,透過撰寫網頁程式碼也可繪製出多邊形,且可改善上述的缺點。
現今瀏覽器大多已完整支援CSS3,想在網頁中加入特殊形狀效果,可以靠手刻撰寫HTML+CSS網頁程式碼來達成,但初學者不易把程式碼與產生的外觀作即時關連想像,無法即時達成所見即所得,也不好透過修改來改成想要的樣式結果;此時透過一些第三方的小工具,不需親自手寫網頁程式碼,就可以很方便快速地可產生我們所想要的樣式結果。
CSS三角形產生器
圖1:CSS三角形產生器頁面
前往三角形產生器網站頁面,網址:http://apps.eky.hk/css-triangle-generator/zh-hant,頁面分成6個區塊(圖1),左側控制選項:方向、種類、大小、顏色、更新按鈕,右側輸出結果:外觀即時預覽、CSS程式碼。