仅用CSS和HTML实现对角线遮罩背景图的问题求助

1. Flex布局宽度过渡实现 #

先搞定hover时的宽度动态变化，通过flex属性配合过渡动画实现平滑效果：

.flex-parent {
  display: flex;
  width: 100%;
  height: 400px; /* 根据需求调整高度 */
}

.flex-child {
  flex: 1; /* 初始三个子元素各占1/3宽度 */
  position: relative;
  background-size: cover;
  background-position: center;
  transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡动画 */
  overflow: hidden;
}

/* hover父容器时，非hover子元素缩小 */
.flex-parent:hover .flex-child {
  flex: 0.5; /* 两个非hover子元素各占25%，总和50% */
}

/* 单独hover的子元素扩展至50% */
.flex-parent .flex-child:hover {
  flex: 2; /* 占总宽度的2/(2+0.5+0.5) = 50% */
}

2. 内联背景图的对角线遮罩 #

因为背景图是Drupal生成的内联style属性，没法把背景图移到伪元素里，所以用伪元素做遮罩层叠在内联背景图上方：

/* 对角线渐变遮罩（示例为左上到右下的半透明渐变遮罩） */
.flex-child::before {
  content: '';
  position: absolute;
  inset: 0; /* 等价于top:0; right:0; bottom:0; left:0; */
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1; /* 确保遮罩在背景图上方 */
}

/* hover时显示遮罩，也可设置默认显示 */
.flex-child:hover::before {
  opacity: 1;
}

之前伪元素方法失效的常见原因 #

• 伪元素未设置position: absolute和inset: 0，无法覆盖整个子元素
• 未设置z-index，遮罩层被背景图覆盖
• 缺少opacity过渡动画，效果生硬

若需对角线裁剪图片而非遮罩 #

如果需求是把图片裁成对角线形状（而非加遮罩），用clip-path实现动态裁剪：

.flex-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 默认矩形 */
  transition: flex 0.4s ease, clip-path 0.4s ease;
}

.flex-child:hover {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); /* 右下切角的对角线效果，可调整参数 */
}

对应HTML结构（Drupal内联背景图） #

<div class="flex-parent">
  <div class="flex-child" style="background-image: url('/path/to/image1.jpg')"></div>
  <div class="flex-child" style="background-image: url('/path/to/image2.jpg')"></div>
  <div class="flex-child" style="background-image: url('/path/to/image3.jpg')"></div>
</div>

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