CSS实现三角形的原理是什么，怎么用代码快速生成不同方向的三角形

在前端页面开发中，三角形的使用场景非常广泛，比如导航的下拉箭头、tooltip提示框的小尖角、步骤条的指示标识等，用CSS实现三角形不需要引入额外图片，能减少资源请求，也方便调整样式，是性价比很高的实现方式。

CSS绘制三角形的核心原理

要理解CSS怎么生成三角形，首先要知道元素的border属性的渲染规则。当一个元素设置了宽高，同时给四个方向都设置不同颜色的边框时，边框的衔接处是斜切的，而不是直角拼接。

我们可以写一段简单的代码验证这个规则：

/* 验证边框渲染规则的样式 */
.box {
    width: 100px;
    height: 100px;
    border-top: 20px solid red;
    border-right: 20px solid blue;
    border-bottom: 20px solid green;
    border-left: 20px solid yellow;
}

运行这段代码后，会看到一个四个角都是斜切的正方形，每个方向的边框都是梯形，四个梯形拼接在一起组成了整个边框区域。这就是三角形绘制的底层逻辑：如果把元素的宽高都设为0，只剩下边框，那么每个方向的边框就会变成三角形。

生成基础三角形

基于上面的原理，我们先生成一个向上的三角形，只需要把元素的宽高设为0，然后只保留底部的边框，其他方向的边框颜色设为透明即可：

/* 向上的三角形 */
.triangle-up {
    width: 0;
    height: 0;
    /* 上边框设为透明，宽度为0 */
    border-top: 0 solid transparent;
    /* 左右边框设为透明，宽度决定三角形的底边宽度 */
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    /* 下边框设置颜色和宽度，宽度决定三角形的高度 */
    border-bottom: 30px solid #ff0000;
}

这段样式对应的HTML元素只需要一个空的div即可：

<div class="triangle-up"></div>

不同方向三角形的实现方法

调整不同方向的边框设置，就能得到四个方向的三角形，核心逻辑是：需要哪个方向的三角形，就保留哪个方向的边框颜色，其余三个方向的边框设为透明，同时对应方向的边框宽度为0。

下面是四个方向三角形的完整CSS代码：

/* 向下的三角形 */
.triangle-down {
    width: 0;
    height: 0;
    border-bottom: 0 solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid #00ff00;
}

/* 向左的三角形 */
.triangle-left {
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 30px solid #0000ff;
}

/* 向右的三角形 */
.triangle-right {
    width: 0;
    height: 0;
    border-right: 0 solid transparent;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #ffff00;
}

调整三角形的大小和比例

三角形的高度由保留颜色的那个边框的宽度决定，底边长度由两侧透明边框的宽度之和决定。比如向上的三角形，border-bottom的宽度是30px，那么三角形高度就是30px；border-left和border-right的宽度都是20px，那么底边长度就是40px。

如果需要调整三角形的宽高比例，只需要修改对应边框的宽度即可。比如要得到一个底边60px、高40px的向上三角形，只需要把左右边框宽度设为30px，底部边框宽度设为40px：

.triangle-custom {
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 40px solid #ff6600;
}

实用注意事项

• 透明边框的颜色可以用transparent关键字，也可以用rgba(0,0,0,0)，效果一致。
• 如果三角形要放在有背景色的容器里，透明边框会自动显示容器背景，不需要额外处理。
• 不要用outline属性代替border，outline不会参与边框的斜切渲染，无法实现三角形效果。
• 如果需要直角三角形，可以把其中一个透明边框的宽度设为0，比如向上的直角三角形，只需要保留border-bottom和border-left，border-right设为0即可。

掌握这个原理后，不管需要什么方向、什么尺寸的三角形，都可以快速写出对应的CSS代码，不用再依赖第三方工具或者反复搜索现成片段。

CSS三角形边框属性border_widthborder_color三角形绘制修改时间：2026-06-04 07:17:34