使用::before伪元素实现切角时背景图片无法透出的问题求助

你当前用border伪元素的方法无法透出背景，是因为border构建的切角区域是实色填充——即使把border-bottom设为transparent，border-left的颜色依然会填充三角区域，所以遮挡了背景图。以下是两种可行的解决方案：

方案一：用clip-path直接切割容器（推荐） #

不需要伪元素，直接给横幅容器添加clip-path属性，通过多边形路径实现切角，背景图会自然透过切角区域显示：

.banner {
  position: relative;
  background: url('你的背景图地址') center/cover no-repeat;
  /* 定义右下角切角路径，100px为切角的边长，可按需调整 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), calc(100% - 100px) 100%, 0 100%);
}

方案二：用渐变背景改造伪元素 #

如果坚持使用伪元素，可通过线性渐变模拟切角，让渐变的透明区域透出背景：

&::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  /* 从右下角到左上角渐变，50%分界处实现透明切角 */
  background: linear-gradient(to top left, transparent 50%, var(--background-color) 50%);
}

这两种方法都能完美实现背景图透过切角显示的效果，其中clip-path方案代码更简洁，兼容性也能覆盖绝大多数现代浏览器。

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