How to make a right-slanted div with rounded corners?

Is there a way to make slanted div on the right side and have rounded corners ?

I'm a bit stubborn, so I spent way too much time on this, trying different ways. the following is based on a question here on SO, but I couldn't find a way to insert an image at the top or the bottom of the div that would also appear slanted.

One of the issue is that I'm using before and after so the image thinks the total width available is the parent div therefore where the width appear shorter, the image "overflow". Sadly, with this approach I also give up the flexibility of anything for a background except solid colours (ie: no gradient, no image).

Goal:

And here's the absolute mess:

    .slanted-container {
        --deg: 10deg;
        --radius: 10px;
    }


    .slanted-container > .slanted:not(:first-child):not(:last-child)::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: purple;
        border: 2px solid white;
        border-left-width: 3px;
        z-index: -1;
        transform: skew(var(--deg));
        transform-origin: center;
        border-radius: var(--radius);
    }

    .slanted {
        position: relative;
        width: 200px;
        min-height: 100px;
        text-align: center;
        line-height: 50px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slanted:first-child::before,
    .slanted:first-child::after {
        position: absolute;
        content: '';
        top: 0;
        height: 100%;
        width: 55%;
        background: purple;
        border: 2px solid white;
        border-left-width: 3px;
        z-index: -1;
    }

    .slanted:first-child::before {
        right: 0px;
        border-radius: var(--radius);
        border-left: none;
        transform: skew(var(--deg));
        transform-origin: bottom right;
    }

    .slanted:first-child::after {
        left: 0px;
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
        border-right: none;
    }

    .slanted:last-child::before,
    .slanted:last-child::after {
        position: absolute;
        content: '';
        top: 0;
        height: 100%;
        width: 55%;
        background: purple;
        border: 2px solid white;
        border-left-width: 3px;
        z-index: -1;
    }

    .slanted:last-child::before {
        left: 0px;
        border-radius: var(--radius);
        border-right: none;
        transform: skew(var(--deg));
        transform-origin: top left;
    }

    .slanted:last-child::after {
        right: 0px;
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        border-left: none;
    }

    .image-wrapper img {
        display: block;
    }

<div class="slanted-container flex p-12">
    <div
        class="slanted relative flex flex-col items-center justify-start overflow-hidden p-1 text-white "
    >
        <div class="image-wrapper relative h-40 w-full overflow-hidden rounded-lg">
            <img src="https://picsum.photos/200/100" class="h-full w-full rounded-lg object-cover" />
        </div>
        <p class="pt-2">sometext</p>
    </div>

    <div class="slanted">middle</div>
    <div class="slanted">middle 2</div>
    <div class="slanted">right</div>
</div>

Solution

So i've made slight adjustments to the prev answer from Solt.

I'm stil using transform: skew()

The slanted container has a set width with overflow hidden. Each child item has a set min-width, to avoid shrinking caused by flex. This is kind of the effect you want, I hope. You can do this with just one element in the container too.

.slanted-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
  border-radius: 16px;
  width: 600px;
  --deg: 10deg;
  --radius: 10px;

}

.slanted {
  position: relative;
  background: purple;
  min-width: 200px;
  height: 100px;
  transform: skew(var(--deg));
  border-radius: var(--radius);
  overflow: hidden;
}

.slanted2 {
  background: purple;
  min-width: 200px;
  height: 100px;
  transform: skew(var(--deg));
  border-radius: var(--radius);
  overflow: hidden;
  background: url(https://www.esiteanalytics.com/wp-content/uploads/GeographicBarrierMedian.jpg);
  background-size: cover;
}

.slanted3 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: purple;
  min-width: 200px;
  height: 100px;
  transform: skew(var(--deg));
  border-radius: var(--radius);
  overflow: hidden;
}

p {
  transform: skew(-10deg);
}

.slanted img {
  display: block;
  max-width: 100%;
}

<div class="slanted-container">
  <div class="slanted">
    <img src="https://www.esiteanalytics.com/wp-content/uploads/GeographicBarrierMedian.jpg" />
  </div>
  <div class="slanted2">
  </div>
  <div class="slanted3">
    <p>Hello World</p>
  </div>
</div>

To get yout mockup try this

.slanted-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
  border-radius: 16px;
  width: 200px;
  --deg: 10deg;
  --radius: 10px;

}

.slanted {
  position: relative;
  background: purple;
  min-width: 200px;
  height: 260px;
  transform: skew(var(--deg));
  border-radius: var(--radius);
  overflow: hidden;
}

.text-container {
  margin-left: 2rem;
  padding: 1.5rem;
  color: white;
}

a {
  color: white;
}

p {
  transform: skew(-10deg);
}

.slanted img {
  display: block;
  max-width: 100%;
}

<div class="slanted-container">
  <div class="slanted">
    <img src="https://www.esiteanalytics.com/wp-content/uploads/GeographicBarrierMedian.jpg" />
    <div class="text-container">
      <p>Some Text</p>
      <p style="text-align:right;">
        <a href="#">More</a>
      </p>
    </div>
  </div>
  <div class="slanted2">
  </div>
  <div class="slanted3">
    <p>Hello World</p>
  </div>
</div>