如何使用clip-path并显示下面的内容

Question

我想创建一个如下图所示的元素。

我尝试使用 CSS 和

clip-path

来实现此目的，方法是将底部设为黑色，并在其上添加

clip-path

多边形（三角形），但它不会显示下面的背景，只显示剪裁的黑色背景。

body {
  background: black;
}

.element {
  width: 300px;
  height: 400px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: end;
}

.triangle {
  width: 48px;
  height: 24px;
  z-index: 20;
  background: black;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

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

<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 class="triangle" />
</div>

我假设我还可以为整个元素定义一个形状并在其上应用

clip-path

，但该元素需要响应，我不确定硬编码路径是否适用于此。

非常感谢任何帮助🙏

Answer 1

需要裁剪的是图像，而不是单独的元素。

此代码片段修复了以 px 为单位的三角形大小，其余剪辑相对于图像大小（即响应式）完成。

body {
  background: black;
}

.element {
  width: 300px;
  height: 400px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: end;
}

.triangle {
  width: 48px;
  height: 24px;
  z-index: 20;
  background: black;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.image {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  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));
}

<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>