CSS3 帶邊的倒三角形是一種常見的圖形設(shè)計，在實(shí)際的網(wǎng)頁制作中也常常運(yùn)用到。下面我們來介紹一下如何使用 CSS3 來制作帶邊的倒三角形。

.triangle {
width: 0;
height: 0;
border-top: 20px solid red;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid black;
}

其中 .triangle 是用于定義樣式的 CSS 類名，可以根據(jù)需要進(jìn)行更改。border-top, border-right, border-left, border-bottom 分別定義了上、右、左、下四個邊的邊框樣式，其中會使用到顏色、邊框?qū)挾取⑹欠裢该鞯葘傩浴?/p>

關(guān)于邊框樣式還有一些其他的設(shè)置，如用 border-radius 進(jìn)行圓角邊框的制作，或者通過 border-image 制作復(fù)雜的邊框樣式。但是本篇文章主要介紹如何制作帶邊的倒三角形，這種制作方式較為簡單易懂，歡迎大家嘗試使用。