border实现向上的小箭头

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

转载最新推荐文章于 2025-05-15 14:36:35 发布 · 1.3k 阅读

本文介绍了一种使用纯CSS实现的小箭头效果，通过巧妙地设置div元素的嵌套和边框样式来达到视觉上的箭头指示效果。此方法不需要额外的图片资源，完全依赖于CSS的边框特性。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .out{
        position:absolute;
        top:35px;
        left: 894px;
        border-color:transparent transparent #f00 transparent;
        border-style:dashed dashed solid dashed;
        border-width:8px;
    }
    .in{
        position:absolute;
        border-color:transparent transparent #ffffff transparent;
        border-style:dashed dashed solid dashed;
        border-width:8px;
        top:-6px;
        right:-8px;
    }
    .border{
        position:relative;
        border:1px solid #999999;
        left:16px;
        width: 1000px;
        height: 50px;
    }
</style>
</head>
<body>
        <div class="border">实现小箭头2
            <div class="out">
                <div class="in"></div>
            </div>
        </div>
</body>
</html>