純css寫箭頭
阿新 • • 發佈:2018-12-26
這是我專案中的樣式,有其他樣式需要的可以自己調
html:
<div class="left-arrow"></div>
css:
/* 向下箭頭 */ .left-arrow { /* 這裡面的樣式可為空 */ display: inline-block; position: relative; width: .2rem; height: .2rem; margin-left: .2rem; } .left-arrow::after {/* 這裡才是主要的箭頭樣式 */ display: inline-block; content: " "; height: .2rem; width: .2rem; border-width: 0 2px 2px 0; /* 順序為上右下左 */ border-color: #7b7b7b; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); right: .2rem; }
這個是沒有其他樣式的下拉箭頭:
.left-arrow { } .left-arrow::after { display: inline-block; content: " "; height: .2rem; width: .2rem; border-width: 0 2px 2px 0; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); }