如何使用适合图像内部的 div 来调整图像角度

Question

我需要找到一种解决方案来保留裁剪后的图像，但在 div 上使用不透明滤镜让内容位于内部。我面临的问题是它不匹配角度，我不能使用隐藏的重叠，需要找到解决方案....任何人都可以帮助解决这种耻辱，你不能在图像上使用 ::after 添加过滤器 div 使部分变暗 :(

.promo {
  position: relative;
}

.promo img {
  -webkit-clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
  clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
}

.promo__content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100% color: #fff;
  background: black;
}

<div class="promo">
  <img src="https://i.picsum.photos/id/100/600/600.jpg" >
  <div class="promo__content">
    Content Here
  </div>
</div>

我正在尝试执行的操作的示例倾斜图像中的黑框黑框将被透视

Answer 1

将剪辑路径应用于整个容器，而不仅仅是图像以获得您想要的内容：

.container {
  margin:50px 0;
  clip-path:polygon(0 16%, 100% 0, 100% 100%, 0% 84%);
  display:flex;
}
.box {
  width:30%;
  padding:80px;
  box-sizing:border-box;
  background:#000;
  color:#fff;
}
.img {
  width:70%;
  background:url(https://i.picsum.photos/id/1074/1000/1000.jpg) center/cover;
}

<div class="container">
    <div class="box">
      some text here<br>
      some text here<br>
      some text here<br>
      some text here<br>
      some text here<br>
    </div>
    <div class="img"></div>
  </div>

如何使用适合图像内部的 div 来调整图像角度

How to angle a image with a div that fits inside the image

html

css

clip-path