如何使用clip-path显示下方内容？实现响应式三角形镂空元素

你当前的问题是用黑色三角形覆盖图片，无法透出下方内容——正确的思路应该是让容器底部出现三角形镂空，而不是用色块遮挡。下面提供两种响应式的实现方案：

方案1：使用CSS mask（推荐，更灵活） #

通过mask属性可以轻松创建镂空效果，用渐变组合出底部的三角形缺口，完全响应式：

<div class="element">
  <img class="image" src="https://images.pexels.com/photos/14616449/pexels-photo-14616449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>

body {
  background: black;
}

.element {
  width: 300px;
  height: 400px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  /* 核心：mask实现底部三角形镂空 */
  mask: 
    /* 上半部分完全显示 */
    linear-gradient(#000, #000) top/100% calc(100% - 24px) no-repeat,
    /* 底部三角形：用锥形渐变，只显示上半部分的三角形区域 */
    conic-gradient(from 180deg at 50% 0, #000 0 180deg, transparent 180deg 360deg) bottom/48px 24px no-repeat;
  /* 兼容webkit内核 */
  -webkit-mask: 
    linear-gradient(#000, #000) top/100% calc(100% - 24px) no-repeat,
    conic-gradient(from 180deg at 50% 0, #000 0 180deg, transparent 180deg 360deg) bottom/48px 24px no-repeat;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

原理说明 #

• mask属性可以让元素只显示mask中不透明的部分，透明区域会透出下方内容
• 第一个渐变负责显示卡片上半部分（高度为容器总高减去三角形高度）
• 第二个锥形渐变创建底部的三角形形状，刚好覆盖需要镂空的位置，让图片从这里透出

方案2：使用响应式clip-path #

如果想用clip-path，可以用百分比定义路径，确保响应式：

.element {
  width: 300px;
  height: 400px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  /* 用百分比和相对单位定义路径 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 24px), 
    calc(50% + 24px) calc(100% - 24px), 
    50% 100%, 
    calc(50% - 24px) calc(100% - 24px), 
    0 calc(100% - 24px)
  );
}

原理说明 #

• 路径中的calc(100% - 24px)表示距离底部24px的位置，24px是三角形的高度
• calc(50% ±24px)是三角形左右两个顶点的水平位置，24px是三角形底边的一半长度
• 所有坐标都基于容器的百分比，所以容器尺寸变化时形状会自动适配

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