在網(wǎng)頁設(shè)計(jì)中，三角符號(hào)常常被用于指示箭頭、下拉菜單以及標(biāo)志性符號(hào)等等。我們可以使用CSS通過偽元素和border屬性輕松地實(shí)現(xiàn)這種效果。

/* 指示箭頭 */
.arrow-right {
position: relative;
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
}
/* 下拉菜單 */
.dropdown {
position: relative;
}
.dropdown:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 10px solid black;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
/* 標(biāo)志性符號(hào) */
.flag {
position: relative;
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid black;
}
.flag:before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white;
}

以上代碼實(shí)現(xiàn)了三種不同的效果。通過調(diào)整border屬性的值以及使用transform屬性來達(dá)到不同形狀的三角符號(hào)。