CSS3中向左箭頭的樣式可以通過"border-left"和"border-bottom"屬性實現(xiàn)。
.arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid black; }
上面的代碼實現(xiàn)了一個黑色向左箭頭,其中"border-top"和"border-bottom"的寬度通過"10px"來控制箭頭的高度,"border-left"的寬度也是"10px",控制箭頭的寬度,顏色可以根據(jù)需求進行調整。
如果想要使箭頭在容器中居中,則可以通過設置"line-height"和"text-align"屬性實現(xiàn)。
.container { width: 200px; height: 50px; line-height: 50px; text-align: center; border: 1px solid black; } .container .arrow { display: inline-block; margin-right: 10px; }
上面的代碼實現(xiàn)了在容器中居中的箭頭,其中"line-height"和容器的高度相等,設置"text-align"為"center"即可使箭頭在容器中水平居中,"display"屬性設置為"inline-block",可以使箭頭與其他元素在同一行顯示。