How to show image as attached shape using html css

I tried to do it using linear-gradient but unable to achieve border radius on top left corner.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.img-container {
    background-image: url('https://loremflickr.com/680/520/car,forest');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 42px 42px 4px;
    position: relative;
    width: 600px;
    height: 320px;
    background-position: 100%;
}

.img-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 182px;
    height: calc(100% + 2px);
    background: linear-gradient(to top left, transparent 50%, white 50.1%)
      bottom left / 182px no-repeat transparent;
}

<!-- language: lang-html -->

<div class="img-container"></div>

<!-- end snippet -->

Skew transformation can help here:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.img-container {
  border-radius: 10px;
  height: 250px;
  width: 400px;
  overflow: hidden;
  transform-origin: bottom;
  transform: skewX(-20deg);
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px 42px 42px 4px;
  transform-origin: bottom;
  transform: skewX(20deg); /* the opposite value here */
}

<!-- language: lang-html -->

<div class="img-container">
  <img src="https://loremflickr.com/680/520/car,forest">
</div>

<!-- end snippet -->