hey, can anyone help me achieve this border design using the css clip property
I have an image, and I would like to have this shape (a semi circle or a triangle on the right or left border) of the image
9 Replies
You may have to give more details, maybe an image of what you want to achieve.
For example:
Do you want the shape to be within the image from the border?
Or should the shape "extend" from the image?
In the meantime I have created a quick codepen using clippath to "add" a triangle to the right-hand side of the image https://codepen.io/cbolson/pen/RwqyMQR I don't know if it is the sort of thing you were after.
sorry, I forgot to attach the image of the shape I was trying to recreate
this is it
https://i.imgur.com/ky8Yodu.png
Imgur
Screenshot
just trying to clip a semi circle on the right border of the image itself
May be you are trying to achive this?
https://prnt.sc/D7wYai8F2lyL
https://codepen.io/Tamim360/pen/abQGPbz
Using a mask: https://codepen.io/cbolson/pen/ZEmomZw
Chris Bolson
CodePen
Circle mask cutout
https://discord.com/channels/436251713830125568/1106037665125642352/1106316356225347635 Avatar cutout methods using SVG and clip-path...
thanks buddies, appreciate your help
that's exactly what I was looking for
just as a heads up for Chris's solution to work on chromium browsers you need to add -webkit prefix
true - I had that but removed it. I have added it back in 👍