CODEWITHSUNDEEP
cssimagepathcurveclip
Vara bl
Vara bl

Reputation: 1

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

Upvotes: -4

Views: 55

Answers (1)

tacoshy
tacoshy

Reputation: 13012

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">

Upvotes: 0

Related Questions