CSS实现三角箭头

最新推荐文章于 2025-05-14 17:03:41 发布

转载最新推荐文章于 2025-05-14 17:03:41 发布 · 849 阅读

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用CSS创建三角形箭头，并提供了一个在线生成工具的链接，同时还推荐了一个包含丰富前端资源的精华帖子。

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

.arrow:before{

    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    position: absolute;
    left: 50%;
    top: -10px;
    margin-left: -2px;
    border-width: 5px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #fff;

三角形箭头一般用在鼠标移入时间弹出图片或文字，也可以做聊天气泡

如果不想自己写，这里有个在线网站可以自动生成你想要的箭头 http://apps.eky.hk/css-triangle-generator/zh-hant

还有一个精华帖，上面有很多好东西，有空可以看看，https://blog.thankbabe.com/collection/