div的左上角添加小三角形，使用:before或者绝对定位

原创已于 2025-12-22 09:29:40 修改 · 342 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端

于 2025-12-22 09:16:02 首次发布

提供2种方式，CSS 伪元素 + 边框透明特性和 position: absolute;独立子元素

如果只是单纯的显示三角形，可以直接使用伪元素方案，如果三角形内要显示其他内容，建议使用独立子元素方案，易于理解

1、使用CSS 伪元素 + 边框透明特性，关键如下：

容器的 position: relative：这是核心前提，因为伪元素要基于该 div 进行绝对定位，否则三角形会脱离 div 跑到页面其他位置。伪元素设置 position: absolute 并定位到左上角（top: 0; left: 0）。
伪元素 ::before：通过这个空的伪元素来承载三角形，不会污染 div 内部的原有内容。
边框制作三角形的原理：
- 当元素的宽高为 0，只设置边框时，四个方向的边框会呈现出梯形拼接的效果；
- 我们将右侧和底部的边框设为 transparent（透明），只保留左侧和顶部的边框为 #E3E8EF，就会形成左上角的三角形。
调整三角形大小：只需修改 border-width 的值即可，比如改为 30px 会让三角形更大，10px 则更小。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左上角三角形示例</title>
    <style>
        /* 基础容器样式 */
        .box {
            position: relative; /* 必须，让伪元素相对于该div定位 */
            width: 300px;       /* 自定义div宽度 */
            height: 200px;      /* 自定义div高度 */
            background-color: #fff; /* 容器背景色，可自定义 */
            border: 1px solid #ddd; /* 可选，方便查看容器范围 */
            margin: 50px auto;  /* 可选，居中显示 */
        }

        /* 左上角三角形的核心样式 */
        .box::before {
            content: "";        /* 伪元素必须有content属性，空值即可 */
            position: absolute; /* 绝对定位 */
            top: 0;             /* 顶部对齐 */
            left: 0;            /* 左侧对齐 */
            /* 利用边框制作三角形：透明边框 + 有色边框组合 */
            border-width: 20px; /* 三角形的大小（边长），可自定义 */
            border-style: solid;
            /* 关键：只保留左侧和顶部的边框为目标色，其他方向为透明 */
            border-color: #E3E8EF transparent transparent #E3E8EF;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2、直接使用position: absolute;绝对定位元素，可以更方便的在三角形里面定义内容

结构更直观：每个 box 里都有一个独立的 .triangle-tag 元素，数字直接写在这个元素内部（比如 <div class="triangle-tag">1</div>），不像伪元素那样需要通过 content 或自定义属性传递，新手更容易理解。
定位逻辑不变：父容器依然需要 position: relative，.triangle-tag 用 position: absolute; top: 0; left: 0; 定位到左上角。
三角形制作原理相同：还是靠 “宽高为 0 + 透明边框” 实现三角形，只是把样式从伪元素移到了独立元素上。
数字居中更灵活：因为是独立元素，除了用 transform 微调，还能直接用 flex 布局（display: flex; align-items: center; justify-content: center;）来做居中，逻辑更清晰。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数字精准居中的三角形</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #ddd;
            margin: 20px auto;
        }

        /* 三角形容器：位置固定在左上角，仅负责显示三角形背景 */
        .triangle-tag {
            position: absolute;
            top: 0;          /* 紧贴div顶部 */
            left: 0;         /* 紧贴div左侧 */
            width: 0;
            height: 0;
            border-width: 20px; /* 三角形大小 */
            border-style: solid;
            border-color: #E3E8EF transparent transparent #E3E8EF;
            /* 让内部数字能基于三角形定位 */
            display: inline-block;
        }

        /* 数字子元素：仅调整位置，不影响三角形 */
        .triangle-num {
            position: absolute;
            top: -20px;      /* 向上对齐三角形顶部 */
            left: -20px;     /* 向左对齐三角形左侧 */
            /* 核心：数字居中（基于三角形的几何中心） */
            transform: translate(50%, 50%); /* 向右、向下各移50%，刚好到中心 */
            /* 文字样式 */
            color: #333;
            font-size: 12px;
            font-weight: bold;
            /* 避免文字占空间，影响定位 */
            line-height: 1;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <!-- 结构：三角形容器 + 数字子元素 -->
    <div class="box">
        <div class="triangle-tag">
            <span class="triangle-num">1</span>
        </div>
    </div>
    <div class="box">
        <div class="triangle-tag">
            <span class="triangle-num">2</span>
        </div>
    </div>
    <!-- 测试更大的三角形，验证适配性 -->
    <div class="box" style="margin-top: 50px;">
        <div class="triangle-tag" style="border-width: 30px;">
            <span class="triangle-num" style="top: -30px; left: -30px; font-size: 16px;">3</span>
        </div>
    </div>
</body>
</html>