I want to have css clip-path like the below image
can someone help me
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/">
Add a comment
|
1 Answer
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">5 Comments
Suresh R
Hi Temani Afif thanks a lot this is what exactly i was looking for
Suresh R
However if i use a different image resolution the shape getting stretched. use below image and see please digital-photo-secrets.com/images/…
Temani Afif
@SureshR because you need a square shape so a square image or you cannot have what you are showing
Suresh R
Sorry for troubling you more @Temani Afif. Why there is a border on the left hand side of the shape. is there any way to control it?
Temani Afif
@SureshR can you show me a screenshot, I don't see that border