css画空心箭头

最新推荐文章于 2025-05-15 14:36:35 发布

Kou_Hi

最新推荐文章于 2025-05-15 14:36:35 发布

阅读量5.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/u010552788/article/details/52400211

css 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用纯CSS创建箭头图标的技巧，并提供了详细的代码实现。通过简单的CSS样式设置，可以轻松实现不同方向的箭头图标，适用于网页设计中指示方向的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<i class="u-arrow u-arrow-left ">
</i>

.u-arrow {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-top: 1px solid #999;
        border-right: 1px solid #999;
    }

    .u-arrow-up {
        transform: rotate(-45deg);
    }

    .u-arrow-down {
        transform: rotate(135deg);
    }

    .u-arrow-left {
        transform: rotate(-135deg);
    }

    .u-arrow-right {
        transform: rotate(45deg);
    }