如何修改HTML/CSS代码实现带透明三角缺口的响应式黑色正方形

现有代码实现了黑色正方形内部包含红色三角形的效果，需要修改代码，使三角形区域变为透明，实现「黑色正方形减去三角形」的响应式形状。当前代码如下：

.bg-danger {
  background: transparent;
  padding: 20px;
}

.square {
  width: 100vw;
  height: 32px;
  background: black;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-bottom: 32px solid red;
  border-radius: 0;
}

<div class="square">
  <div class="triangle"></div>
</div>

方案1：使用CSS clip-path（推荐，简洁高效） #

直接通过clip-path属性裁剪正方形，不需要额外子元素，天然支持响应式：

修改后的CSS：

/* 不需要可删除.bg-danger样式 */
.bg-danger {
  background: transparent;
  padding: 20px;
}

.square {
  width: 100vw;
  height: 32px;
  background: black;
  /* 多边形裁剪路径：左上角→右上角→底部中点→左上角 */
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}

简化后的HTML：

<div class="square"></div>

说明：clip-path的polygon用百分比定义坐标，无论容器尺寸如何变化，三角形缺口都会保持比例，完全满足响应式需求。

方案2：使用CSS mask（兼容现代浏览器） #

通过渐变创建遮罩层，实现透明三角形缺口：

.bg-danger {
  background: transparent;
  padding: 20px;
}

.square {
  width: 100vw;
  height: 32px;
  background: black;
  /* 双渐变组合出三角形遮罩，只显示遮罩内的黑色区域 */
  -webkit-mask: linear-gradient(to bottom right, transparent 50%, black 50%),
                linear-gradient(to bottom left, transparent 50%, black 50%);
  mask: linear-gradient(to bottom right, transparent 50%, black 50%),
        linear-gradient(to bottom left, transparent 50%, black 50%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

HTML同样只需保留.square元素即可。

方案3：基于原结构修改（不推荐，冗余） #

如果要保留原有的嵌套结构，可通过背景混合模式实现：

.bg-danger {
  background: transparent;
  padding: 20px;
}

.square {
  width: 100vw;
  height: 32px;
  background: black;
  position: relative;
}

.triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 双渐变叠加出透明三角形，通过混合模式覆盖黑色背景 */
  background: linear-gradient(to bottom right, transparent 50%, white 50%),
              linear-gradient(to bottom left, transparent 50%, white 50%);
  background-blend-mode: screen;
}

这种方法需要额外处理混合模式，代码冗余度较高，不如前两种方案简洁。

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