CSS3中有許多偽類可以用于樣式的選擇和修改，今天我們來介紹一種非常實(shí)用的偽類——右三角（:after）。通過使用這個(gè)偽類，我們可以為元素添加一個(gè)帶有右箭頭的樣式，非常適合用于一些菜單或者列表的制作。

.right-triangle{
position:relative;
color:#fff;
background-color:#333;
padding:10px;
}
.right-triangle:after{
content:'';
position:absolute;
top:50%;
right:0;
margin-top:-5px;
border-top:5px solid transparent;
border-right:5px solid #fff;
border-bottom:5px solid transparent;
}

在上面的代碼中，我們首先定義了一個(gè)類名為right-triangle的元素，在CSS中，我們?yōu)樗x了一些基礎(chǔ)的樣式，例如背景顏色、字體顏色以及內(nèi)邊距等。接下來，我們使用了右三角的偽類（:after），并為它設(shè)置了content屬性，這個(gè)屬性必須設(shè)置，否則偽類不會(huì)生效。偽類的展示位置根據(jù)元素的position屬性而定，我們?cè)谶@里設(shè)置了position:relative，因此偽類的位置是相對(duì)于這個(gè)元素的。接著，我們?cè)O(shè)置了偽類的位置（top:50%;right:0;），以及邊框的樣式，通過調(diào)整邊框的大小和寬度，就能實(shí)現(xiàn)一個(gè)漂亮的右三角效果。

需要注意的是，在一些老的瀏覽器中，右三角的偽類可能需要使用hack來進(jìn)行支持，例如加入IE6-8的expressiom、*display:inline等hack代碼，建議在實(shí)際使用時(shí)進(jìn)行測(cè)試和兼容處理。