如果你想在你的網頁中使用直角三角形,那么可以使用 CSS 來實現。下面是一些用 CSS 制作直角三角形的方法。
/*方法一*/ .triangle { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; } /*方法二*/ .triangle { width: 100px; height: 100px; border-top: 100px solid red; border-right: 100px solid transparent; transform: rotate(45deg); } /*方法三*/ .triangle { width: 0; height: 0; border-top: 50px solid red; border-left: 50px solid transparent; transform: rotate(-45deg); }
以上三個方法的效果都是相同的,所以你可以選擇其中你喜歡的一種。其中第二種方法因為使用了transform
屬性,所以在一些舊的瀏覽器中可能無法正常顯示。
如果你使用了以上的任意一種方法,你就可以在 HTML 中使用<div class="triangle"></div>
來創建一個直角三角形了。你可以在 CSS 中更改border-top
的寬度和顏色,來改變直角三角形的大小和顏色。