告别图片！三种 CSS 原生方案实现任意方向三角形

原创于 2026-06-28 17:05:25 发布 · 378 阅读

5 ·

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

GEO检测

标签

#css #前端

哈喽大家好！

今天我们来讲如何用css实现任意的三角形

在日常开发中你是不是遇到过弹窗箭头、标签尖角、分割指示图标等场景都需要三角形，而插入图片又太麻烦、兼容性差、加载慢。我整理了三种实现方法，分别是：

1.边框法（最常用的）

1.给盒子设置宽高都为0；

2.给盒子四条边设置相同粗细，不同的颜色

3.浏览器边框交界处会自动切割成斜角，四条边框各自形成三角形；

4.需要哪个方向的三角形就保留对应边颜色，其余三边设为 transparent 透明

<style>
    *{
        /* 给盒子设置宽高都为0；*/
        margin: 0;
        padding: 0;
    }

    .box{
        /* 
            给盒子四条边设置相同粗细，不同的颜色
            浏览器边框交界处会自动切割成斜角，四条边框各自形成三角形；
            需要哪个方向的三角形就保留对应边颜色，其余三边设为 transparent 透明 
        */
        width: 0px;
        height: 0px;
        border: 50px solid;
        border-color: red green blue yellow;
    }
</style>
<body>
    <div class="box"></div>
</body>

运行代码：

2.裁剪法

1.clip-path: polygon() 多边形裁剪，通过设置 3 个坐标点，只保留三角形区域，其余全部裁剪透明

2.坐标规则：

坐标系：元素左上角为 (0,0)，向右 X 增大，向下 Y 增大polygon(x1 y1, x2 y2, x3 y3) 三个点围成三角形

<style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        margin: 50px auto;
        width: 200px;
        height: 200px;
        background-color: aqua;
        clip-path: polygon(0% 100%,50% 0%,100% 100%);
    }
</style>
<body>
    <div></div>
</body>

运行代码：

3. 通过background实现

1.容器宽和高设置为0

2.定义两段对角线线性渐变，前半透明、后半填充渐变色

3.通过 background-size 统一控制三角尺寸

<style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        width: 200px;
        height: 200px;
        margin: 50px auto;
        background: linear-gradient(45deg,red 50%,transparent 50%);
    }
</style>
<body>
    <div></div>
</body>

代码示例：