如何使图像满足具有::after且倾斜的div

Question

我希望图像遍布这个元素，但我不知道如何实现这一点。

我正在尝试实现这种布局：

但是现在，我陷入了这一点：

我正在使用codepen来测试它，但我将在这里发布我的代码：

HTML：

<div class="box">
  <img src="https://source.unsplash.com/random" alt="" class="img-fluid h-100 w-100">
</div>

CSS：

.box{
  margin: 50px 20px;
  width: 200px;
  height: 200px;
  position: relative;
}
.box::after{
  background-image: url("https://source.unsplash.com/random");
  background-size: cover;
  content: "";
  border-radius: 20px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: -90%;
  z-index: -1;
  transform-origin: top right;
  transform: skew(-30deg, 0deg);
}

任何帮助或提示，我们将不胜感激。

我正在考虑使用遮罩或带有 z-index 的包装器，但我完全陷入困境。

我还需要图像保持在正常位置（不倾斜），但目前没有必要。

这是我用来解决此问题的 codepen 的链接：https://codepen.io/jonathanyont/pen/yLGOebW?editors=1100

Answer 1

您需要倾斜包装纸，在其上设置

overflow: hidden

，然后使用与父级相同的角度乘以

-1

来消除内部图像的倾斜。

像这样：

figure {
    --a: -20deg;
    overflow: hidden;
    margin: 0;
    width: max-content;
    border-radius: 1.5em;
    transform-origin: 0 0;
    transform: skewx(var(--a));
}

img {
    border-radius: inherit;
    transform-origin: inherit;
    transform: skew(calc(-1*var(--a)));
}

<figure>
  <img src="https://images.unsplash.com/photo-1700667315345-e0c51587b2fd?w=400"/>
</figure>