0%

CSS 筆記 - 三角形演進史

triangle

之前一直不知道三角形怎麼寫,透過人員卡片練習,跟看到 Amos 回顧單純講到三角形的寫法,就來筆記一下,比想像得還要簡單!!

方形

大家都知道方形怎麼寫,把四邊的邊線加粗,然後加上顏色會看到邊線交接處會變成斜角,中間會有一個方框,就是原本設定的方形寬高。

四個三角組成的方形

再來把方形寬高變成 0 ,方框消失,只剩下邊框,就會看到變成三角形組成的方形(有發現三角形出現了!)。

單一三角形

知道這樣的原理後,只要把其他的部分改成透明顏色,顏色屬性的值使用 transparent,就會變透明囉!!這樣三角形就出現了,border 的粗細度修改,就可以得到不同長度的三角形,至於要正三角、等腰三角形、直角三角形或是不對稱三角形,可以自己設定玩玩看。