How to show image as attached shape using html css

enter image description here

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

.img-container {
    background-image: url(',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;
<div class="img-container"></div>

>Solution :

Skew transformation can help here:

.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 */
<div class="img-container">
  <img src=",forest">

Leave a Reply