在CSS中,畫三角形是一種常見的需求。下面我們來介紹兩種常用的方法。
/* 方法一:使用border */ .triangle { width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } /* 方法二:使用偽元素 */ .triangle::before { content: ""; display: block; width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; }
以上兩種方法均使用了CSS的邊框屬性,其中方法二使用了偽元素來實現。通過調整邊框的寬度和顏色,以及偽元素的位置和旋轉角度,我們可以畫出不同形狀的三角形。
除此之外,我們還可以使用SVG或Canvas來畫出復雜的圖形,但這已超出了CSS的范疇。