3

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

PochiJr
  • 33
  • 2

1 Answers1

0

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.

Swat25
  • 34
  • 4