线性渐变下透明边框失效：如何为红色三角区域添加渐变

当你用border伪元素做三角时，渐变背景会覆盖透明border区域，导致三角的透明部分失效——这是因为border的透明是元素边框的透明，而渐变背景会填充整个伪元素。下面是几种可行的解决方法：

方案1：用clip-path直接裁剪渐变三角 #

不需要依赖border，直接通过clip-path定义三角形状，伪元素使用和主体一致的渐变背景即可。

<div class="box">带渐变三角的盒子</div>

.box {
  width: 200px;
  height: 100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  padding: 1rem;
  color: #fff;
}

.box::after {
  content: '';
  position: absolute;
  bottom: -20px; /* 控制三角的高度 */
  left: 50px;
  width: 40px; /* 三角底边长度 */
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* 裁剪为下三角，修改坐标可得到不同方向的三角 */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

这种方法形状可控性强，渐变不会出现异常，兼容性也不错（除IE外）。

方案2：旋转渐变矩形生成三角 #

将伪元素设置为矩形，添加渐变后旋转角度，通过定位只露出三角部分。

.box {
  width: 200px;
  height: 100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  padding: 1rem;
  color: #fff;
}

.box::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 40px;
  height: 40px;
  /* 调整渐变角度，适配旋转后的视觉效果 */
  background: linear-gradient(225deg, #667eea 0%, #764ba2 100%);
  transform: rotate(45deg);
}

注意要根据旋转角度调整渐变方向，确保和主体渐变视觉统一。如果需要隐藏多余部分，给父元素加overflow: hidden即可。

方案3：用CSS Mask保留border三角的透明性 #

如果一定要用border实现，可以通过mask属性只显示三角区域，让渐变背景只在该区域生效。

.box {
  width: 200px;
  height: 100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  padding: 1rem;
  color: #fff;
}

.box::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50px;
  width: 0;
  height: 0;
  /* 先设置border结构，三个边透明，一个边用纯色占位 */
  border: 20px solid transparent;
  border-top-color: #000;
  /* 覆盖渐变背景 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* 通过mask只显示三角区域 */
  mask: linear-gradient(45deg, transparent 50%, #000 50%);
}

mask会隐藏除三角外的所有区域，这样渐变就只会在三角部分显示，同时保留border的透明效果。不过mask在旧版浏览器中兼容性较差。

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