纯css写箭头

这是我项目中的样式，有其他样式需要的可以自己调
效果图:

方向不一样可以自己调border-width
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);
}