這也是在解第三題時產生的需求,因為原始素材中少了許多圖檔,包括左右箭頭,雖然老師是直接開PS來直接畫一個,不過我想了一下,似乎直接用CSS來快速產生一個三角形會更快一些,利用的原理是block邊框的特性,css的邊框預設是會以45度角的方式來連接,這個設計的特色在於我們可以透過設定邊框的顏色就快速產生一個按鈕的區塊出來,省掉不少美術的工作,因此很多新的網頁設計都會利用這個特性來產生簡易的幾何圖形,取代傳統美術需要製作一堆icon的工作,

我直接附上css的原始碼及變化過程的截圖,就不再多做文字解釋了,相信看完就能明白

原始block的狀態,正常使用我們設定寬高

一般我們會直接加上四邊同色的邊框

如果我們加上較粗的邊框並給予四邊不同的顏色,很明顯的可以看出四邊交接處是以45度角的方式接合

把邊框加更粗的話,我們可以看到四個梯形出現了,但是中間的方框是我們不想要的

把block的長寬設為0後,我們看到四個顏色的等邊三角形接合在一起,而邊框的寬度成了等邊三角形的高

我們把其中三邊的顏色設為透明色的話,就可以看到一個三角形出現了。

調整另外三邊的寬度,可以產生各種形狀的三角形,因為這個三角形其實是一個block的區塊,所以可以拿來加上行為比如超連結或click等等

除了三角形,利用border-radius屬性還可以產生圓形,更可以組合多個block來產生各種幾何圖形,更多變化,大家可以自己再去研究。

最後修改日期: 2018-02-02

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。