Web前端

纯 CSS 利用 border 边框透明原理绘制任意方向三角形

1 min read

在前端制作气泡提示（Tooltip）箭头、下拉菜单指示角标或角标徽章时，无需加载任何图片或图标字体，利用 CSS 盒模型中边框相交的斜切机制即可纯代码实现极速渲染。

一、 核心原理：宽高为 0 + 透明边框

.triangle-up {
    width: 0;
    height: 0;
    /* 左右边框透明，底边有颜色即可形成向上三角形 */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #3498db;
}

二、 四向三角形生成速查

/* 向下三角形 */
.triangle-down {
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #e74c3c;
}

/* 向右三角形 */
.triangle-right {
    width: 0; height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #2ecc71;
}
#Web前端