cssimagepathcurveclip

how to achieve a wing style curved shape for image as per the attached screenshot


enter image description here

how to achieve a wing style curved shape for image as per the attached screenshot using css

Tried with css border radius and alos with clip path css generator we were not able to achieve as per required curve shape for image


Solution

  • You can cut the curve with clip-path: ellipse() and then add the rounded corners at the right side by applying the border-radius only to those corners:

    img { 
      display: block;
      border-top-right-radius: 1em;
      border-bottom-right-radius: 1em;
      clip-path: ellipse(100% 120% at 100% 0%);
    }
    <img src="https://placehold.co/578x559">