CSS中可以使用:before和:after偽元素屬性來添加一些特殊的樣式,比如在一個區(qū)域中添加一個三角形。
.arrow { position: relative; background-color: #333; width: 100px; height: 100px; margin: 50px; } .arrow:before { content: ""; position: absolute; top: -20px; right: -20px; border-right: 20px solid transparent; border-top: 20px solid #333; }
上述代碼中,我們給一個名為arrow的元素添加一個:before偽元素,將這個偽元素定位到了該元素的右上角,然后設(shè)置了一個透明的三角形邊框,最后設(shè)置上方的邊框顏色為和該元素相同的顏色即可。
可以根據(jù)需要調(diào)整三角形的大小和位置,以達(dá)到最終的效果。