Actualmente estoy desarrollando mi primer gran proyecto Vue, ya estoy bastante familiarizado con el marco, pero mi mayor defecto es CSS, me preguntaba si podría hacer este efecto de "muesca" en un componente de tarjeta (la tarjeta ya está hecha, es simplemente una imagen de borde redondeado como la que se muestra en la imagen). (Enlace a Imgur abajo)
https://i.stack.imgur.com/SCJ23.png
No sé si este efecto se hace fácilmente con CSS, si no, no tengo problemas con tener que usar otras bibliotecas o cualquier otro truco que no involucre CSS.
Eso es todo, todo
Lo que necesita aquí es usar CSS Clip-Path para crear la forma deseada. Puedes usar la siguiente propiedad CSS
clip-path: polygon(50% 0%, 63% 12%, 100% 12%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0);Consulte https://bennettfeely.com/clippy/ para crear clips con la forma deseada. En su ejemplo, comencé con un decágono y lo remodelé para que coincidiera con el suyo.
Lea https://css-tricks.com/clipping-masking-css/ para comprender los clips y el enmascaramiento en CSS. Tienen algunos grandes ejemplos.