Search code examples
csscss-shapesclip-path

Rounded image shape using clip-path

I want to have css clip-path like the below image

can someone help me

enter image description here

img {
  clip-path: polygon(53% 0%, 100% 1%, 100% 50%, 100% 100%, 55% 100%, 42% 65%, 0% 52%, 44% 36%);
  border-radius:0 100% 100% 0
}
<img src="http://lorempixel.com/400/400/">

Solution

  • mask can easily do this. It would be tricky to have curve with clip-path

    img {
  width:50%;
  border-radius:50%;
  -webkit-mask:
    radial-gradient(circle at top    left,transparent 45%,#fff 45.5%) top,
    radial-gradient(circle at bottom left,transparent 45%,#fff 45.5%) bottom;
  -webkit-mask-size:100% 50%;
  -webkit-mask-repeat:no-repeat;
  
}
    <img src="https://picsum.photos/id/1012/800/800">

    Another syntax:

    img {
  width:50%;
  border-radius:50%;
  -webkit-mask:
    radial-gradient(51% 51% at 0 0   ,transparent 99%,#fff),
    radial-gradient(51% 51% at 0 100%,transparent 99%,#fff);
  -webkit-mask-composite: destination-in;
  mask-composite:intersect;
}
    <img src="https://picsum.photos/id/1012/800/800">