css实现箭头

1、实心箭头：
.arrow {
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #7AC161;
position: absolute;
content: ‘’;
}

2、空心箭头
/下箭头/
.down-arrow {
display :inline-block;
position: relative;
width: 40px;
height: 30px;
margin-right: 20px;
}

.down-arrow::after {
display: inline-block;
content: " ";
height: 18px;
width: 18px;
border-width: 0 2px 2px 0;
border-color: #FFF;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform-origin: center;
transition: transform .3s;
position: absolute;
top: 50%;
right: 10px;
margin-top: -10px;
}
/加上active旋转成 上箭头/
.down-arrow.active::after {
transform-origin: center;
transform: rotate(-135deg);
transition: transform .3s;
}

最后

以上就是心灵美冰淇淋为你收集整理的css实现箭头的全部内容，希望文章能够帮你解决css实现箭头所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。