How to make a image fulfill a div that has a ::after with skew

Question

I want the image to go all over this element, but I can't figure it out on how to accomplish this.

I am trying to achieve this layout:

Desired design

But right now, I am stuck at this point:

Actual design

I'm using codepen to test it, but I will post my code here:

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);
}

Any help or tip would be appreciated.

I was thinking about use mask or maybe a wrapper with z-index, but I am totally stucked.

I would also need the image to stay in the normal positon (not skewed), but that is not necessary at the moment.

Here's the link to the codepen that I'm using to solve this: https://codepen.io/jonathanyont/pen/yLGOebW?editors=1100

Answer 1

You need to skew the wrapper, set overflow: hidden on it and then unskew the image inside using the same angle as on the parent multiplied with -1.

Like this:

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>