I am currently developing my first major Vue Project, I am pretty much familiar already with the framework, but my biggest flaw is CSS, I was wondering if I could make this "notch" effect on a Card component (the card is already made, it's simply a rounded border image like the one showing in the picture). (Link to Imgur below)
https://i.stack.imgur.com/SCJ23.png
I don't know if this effect is easily made with CSS, if not, I have no issues with having to use other libraries or any other trick that doesn't involve CSS.
That's all, ty all
What you need here is to use CSS Clip-Path to make the desired shape. You can use the following the CSS property
clip-path: polygon(50% 0%, 63% 12%, 100% 12%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0);
Check out https://bennettfeely.com/clippy/ to create clips of your desired shape. In your example I started out with a decagon and reshaped it to match yours.
Read https://css-tricks.com/clipping-masking-css/ to understand clips and masking in CSS. They have some great examples.