如何在 Vue.js 上為卡片組件添加缺口

Question

我目前正在開發我的第一個主要 Vue 項目，我已經對該框架非常熟悉，但我最大的缺陷是 CSS，我想知道是否可以在卡片組件上制作這種“缺口”效果（卡片已經制作，它只是一個圓形邊框圖像，就像圖片中顯示的那樣）。 （下面鏈接到 Imgur）

我不知道這個效果是否很容易用 CSS 制作，如果沒有，我不必使用其他庫或任何其他不涉及 CSS 的技巧。

就是這樣，全部

Answer 1

您在這里需要的是使用 CSS Clip-Path 來制作所需的形狀。 您可以使用以下 CSS 屬性

clip-path: polygon(50% 0%, 63% 12%, 100% 12%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0);

查看https://bennettfeely.com/clippy/創建所需形狀的剪輯。 在你的例子中，我從一個十邊形開始，然后重新塑造它以匹配你的。

閱讀https://css-tricks.com/clipping-masking-css/以了解 CSS 中的剪輯和遮罩。 他們有一些很好的例子。