我是靠谱客的博主 心灵美冰淇淋,这篇文章主要介绍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实现箭头内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(59)

评论列表共有 0 条评论

立即
投稿
返回
顶部