CSS3實(shí)現(xiàn)實(shí)心三角

使用CSS3可以非常簡單地實(shí)現(xiàn)一個(gè)實(shí)心三角形。具體來說，只需要用到 CSS3 中的“border-width”和“border-style”屬性，通過設(shè)定不同的值來改變邊框的樣式和寬度，再設(shè)置“border-color”屬性來改變?nèi)切蔚念伾?/pre>
例如：
<style>
.triangle {
width: 0;
height: 0;
border-width: 30px 30px 0 0;
border-style: solid;
border-color: #ff0000 transparent transparent transparent;
}
</style>
<div class="triangle"></div>
解釋：
首先，我們?cè)O(shè)置了一個(gè)類名為“triangle”的 div 容器，容器的寬度和高度都設(shè)為 0，這個(gè)容器將成為我們要繪制的三角形。
接著，我們使用“border-width”屬性為三角形的四個(gè)邊框設(shè)置邊框?qū)挾龋瓷喜糠值膶挾葹?30px，右邊部分的寬度也為 30px，同時(shí)左邊和下邊的寬度為 0。
然后，我們使用“border-style”屬性設(shè)置三角形邊框的樣式。在這里，我們使用“solid”來表示邊框?yàn)閷?shí)線。
最后，使用“border-color”屬性來改變?nèi)切蔚念伾Ｔ谶@里，我們?cè)O(shè)置為紅色，并同時(shí)通過“transparent”關(guān)鍵字來表示要使三角形的其他三個(gè)角是透明的。
運(yùn)行示例代碼，我們就可以看到一個(gè)漂亮的實(shí)心三角了。