这是我项目中的样式,有其他样式需要的可以自己调
效果图:
方向不一样可以自己调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);
}