Making left border skewed without affecting right border and the image fit the border without getting skewed as well

Question

I tried to make this border shape for hours and not getting the desired result. I have tried using transform: skewX(20deg) and clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);

This is the closest one

 HTML
    <div class="skewed-image">
      <img src="/smiling-coworkers.png" alt="Your Image" />
    </div>

 CSS
.skewed-image {
  margin-top: 100px;
  margin-left: 200px;
  width: 500px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-right: 2px solid #000; /* Adjust the color and width as needed */
  border-radius: 40px 0 0 40px; /* Adjust the radius as needed */
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);
}

.skewed-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 40px 0 0 40px; /* Match the same radius as the container */
}   `

This is the desired result (Right image)

Answer 1

Can you try below css, I have used transform skew, may not be exact but you can adjust css accordingly:

.skewed-image {
  width: 500px;
  margin-top: 100px;
  margin-left: 200px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 70px 0 0 40px;
  transform-origin: top;
  transform: skew(30deg);
}

.skewed-image img {
  display:block;
  transform-origin:inherit;
  transform:skew(-30deg);
  width: 100%;
  height: auto;
}