如何为带有mask-image的tooltip元素添加1px红色边框？

问题背景 #

我有一个tooltip元素，需要为其添加1px solid red边框，但该元素使用了mask-image，普通边框会被遮罩隐藏（遮罩外的内容都会被隐藏）。

当前Tooltip的代码如下：

CSS代码 #

.tooltip {
    display: inline-block;
    position: relative;
    max-width: 28rem;
    padding: 8px 8px 18px 8px;
    color: white;
    background: linear-gradient(180.43deg, rgb(0, 0, 0) 0.74%, rgb(5, 180, 98) 124.74%);
    -webkit-mask-image:
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                linear-gradient(#fff, #fff),
                linear-gradient(#fff, #fff),
                url("data:image/svg+xml;utf8,<svg width='20px' height='10px' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'><path d='M 0 0 L 60 0 L 30 30 Z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position:
                0 0,
                100% 0,
                0 calc(100% - 10px),
                100% calc(100% - 10px),
                0 5px,
                5px 0,
                calc(10% - 10px) 100%;
    -webkit-mask-size:
                10px 10px,
                10px 10px,
                10px 10px,
                10px 10px,
                100% calc(100% - 20px),
                calc(100% - 10px) calc(100% - 10px),
                20px 10px;
}

HTML代码 #

<div class="tooltip">
    <div>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26</div>
</div>

已尝试的无效方法 #

• border: 1px solid red;：被mask遮罩隐藏
• feMorphology border + filter(#svg_id)：仅能在外部绘制边框，无法向内
• 添加带相同mask的子div，根元素设border: 1px solid red和background-color: red：底部三角的边框不够完美
• box-shadow：无效
• drop-shadow：无效

约束条件：不能将三角与内容拆分为独立元素，否则会破坏渐变背景。

解决方案 #

通过双层mask叠加+内缩背景模拟边框的方式实现，核心思路是用伪元素生成匹配tooltip形状的红色边框层，原元素向内收缩留出边框空间，完美保留渐变背景和整体形状。

修改后的CSS代码如下：

.tooltip {
    display: inline-block;
    position: relative;
    max-width: 28rem;
    padding: 8px 8px 18px 8px;
    color: white;
    background: linear-gradient(180.43deg, rgb(0, 0, 0) 0.74%, rgb(5, 180, 98) 124.74%);
    -webkit-mask-image:
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                radial-gradient(#fff 4.5px, rgba(255, 255, 255, 0) 5px),
                linear-gradient(#fff, #fff),
                linear-gradient(#fff, #fff),
                url("data:image/svg+xml;utf8,<svg width='20px' height='10px' viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'><path d='M 0 0 L 60 0 L 30 30 Z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position:
                0 0,
                100% 0,
                0 calc(100% - 10px),
                100% calc(100% - 10px),
                0 5px,
                5px 0,
                calc(10% - 10px) 100%;
    -webkit-mask-size:
                10px 10px,
                10px 10px,
                10px 10px,
                10px 10px,
                100% calc(100% - 20px),
                calc(100% - 10px) calc(100% - 10px),
                20px 10px;
    /* 新增：向内偏移1px，留出边框空间 */
    margin: 1px;
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: red;
    /* 完全继承原元素的mask属性，保证边框形状与tooltip完全匹配 */
    -webkit-mask-image: inherit;
    -webkit-mask-repeat: inherit;
    -webkit-mask-position: inherit;
    -webkit-mask-size: inherit;
    z-index: -1;
}

方案说明 #

• 伪元素::before作为边框层，尺寸比原tooltip大1px，背景设为红色，同时继承原元素所有mask属性，确保边框的圆角、三角形状与tooltip完全一致。
• 原tooltip设置margin:1px向内收缩，避免覆盖伪元素的边框，同时不影响内部内容布局。
• 无需拆分三角和内容区域，完美保留原有的渐变背景效果。

内容的提问来源于stack exchange，提问作者Shanon Jackson