在網(wǎng)站設(shè)計(jì)中，經(jīng)常會用到各種形狀的圖形來裝飾頁面，其中直角三角形是一個不錯的選擇。通過CSS可以輕松地實(shí)現(xiàn)直角三角形，并且還可以加上動畫效果，使頁面更加生動和有趣。

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #f00;
border-bottom: 50px solid transparent;
}

上述代碼實(shí)現(xiàn)了一個簡單的紅色直角三角形。其中，border-top和border-bottom分別定義了三角形上半部分和下半部分的邊框，而border-right則是定義了三角形右邊的邊框。為了形成直角三角形，border-top和border-bottom的寬度都設(shè)置為50px，而border-right的寬度則是100px，恰好為前面兩個的兩倍。

.triangle-animation {
animation: triangleMove 2s ease-in-out infinite;
}
@keyframes triangleMove {
0% { transform: translateX(0); }
50% { transform: translateX(200px); }
100% { transform: translateX(0); }
}

如果想要為直角三角形加上動畫效果，可以使用CSS動畫。上述代碼定義了一個叫做triangleMove的動畫，將三角形水平向右移動200px，然后又返回到原來的位置。設(shè)置了animation屬性，讓三角形不斷地重復(fù)播放這個動畫。

通過CSS的border屬性和transform屬性，可以輕松地實(shí)現(xiàn)直角三角形的樣式和動畫。在設(shè)計(jì)網(wǎng)站時，可以靈活運(yùn)用這些功能，打造出更具視覺效果和動感的頁面。