css实现左，右箭头按钮

最新推荐文章于 2023-05-06 21:32:02 发布

汉武大帝·

最新推荐文章于 2023-05-06 21:32:02 发布

阅读量3.4k

点赞数 3

分类专栏： css3

本文链接：https://blog.csdn.net/yinge0508/article/details/103803038

版权

css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

先看效果图：

实现效果的css样式如下：

<!-- 左箭头 -->
<div style="width:50px;height:50px;background:blue;margin:10% 0 0 10%;">
	<div style="position: relative;top: 27%;left: 31%;width:20px;
height:20px;border-top:3px solid #fff;border-right:3px solid #fff;transform: rotate(-135deg);"></div>
</div>
<!-- 右箭头 -->
<div style="width:50px;height:50px;background:blue;margin:2% 10%;">
	<div style="position: relative;top: 27%;left: 18%;width:20px;
height:20px;border-top:3px solid #fff;border-right:3px solid #fff;transform: rotate(45deg);"></div>
</div>

根据需要的样式不同，可以再调整