1. 程式人生 > >純css寫箭頭

純css寫箭頭

這是我專案中的樣式,有其他樣式需要的可以自己調
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);
}