css制作上下左右箭头

最新推荐文章于 2025-01-26 14:32:55 发布

小太阳sunshine

最新推荐文章于 2025-01-26 14:32:55 发布

阅读量3.3k

点赞数 1

分类专栏：前端技巧 css 文章标签： css 箭头

本文链接：https://blog.youkuaiyun.com/zfangls/article/details/53466371

版权

前端技巧同时被 2 个专栏收录

15 篇文章

订阅专栏

css

6 篇文章

订阅专栏

这里写图片描述

html部分：

<div style="position: relative">
     <span class="arrow arrow-down"></span>
     <span class="arrow arrow-up"></span>
     <span class="arrow arrow-left"></span>
     <span class="arrow arrow-right"></span>
 </div>

css部分：

.arrow {
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
    }

.arrow-down {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #ccc;
 }

 .arrow-up {
     border-bottom: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     top: 50px;
 }

 .arrow-left {
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-right: 5px solid #ccc;
     top: 100px;
 }

 .arrow-right {
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 5px solid #ccc;
     top: 150px;
 }