CSS3 是一種廣泛使用的 HTML 和 CSS 樣式語言,可以用它來實現各種特效效果,包括使用 CSS3 畫一個三角形。
.triangle { width: 0; height: 0; border-top: 50px solid transparent; border-left: 50px solid #f00; border-right: 50px solid transparent; }
以上代碼就可以畫出一個紅色的等腰三角形,其原理是通過利用 border 屬性來實現。為了畫出一個等腰三角形,我們需要設置三個邊,其中一個為水平的底邊,另外兩個為斜邊,兩個斜邊的長度應相等。設置不透明的底邊以及始終為 50px 的斜邊長度,則我們可以通過調整三角形的高度來改變斜邊之間的夾角大小,進而畫出各種形狀的三角形。
這里我們使用了 transparent 來設置紅色三角形的右下角為透明,從而制造出一個等腰三角形。
總的來說,使用 CSS3 畫三角形非常簡單,只需要調整 border 的各個屬性即可,既方便快捷且易于掌握。