在CSS中,可以使用偽元素(::before或::after)屬性來畫出一個(gè)條狀形箭頭。以下是代碼示例:
.arrow { position: relative; width: 80px; height: 20px; background-color: #fff; border: 1px solid #000; } .arrow::before { content: ""; position: absolute; top: 50%; left: -8px; margin-top: -5px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 8px solid #000; }
在上述代碼中,首先創(chuàng)建了一個(gè)具有特定寬高、背景顏色和邊框的容器。然后,通過添加偽元素::before,并使用絕對(duì)定位將其定位到容器的左側(cè),來創(chuàng)建箭頭。為了畫出箭頭,設(shè)置了元素的寬度和高度,以及邊框的寬度和樣式。其中,上下兩個(gè)三角形由透明的邊框定義,右側(cè)的矩形由黑色實(shí)線邊框定義。