Vuetify：如何创建三角形徽章？

Question

我知道如果我使用 v-badge，我会得到一个圆形徽章，但我想要一个三角形徽章，如下所示。

谁能给个制作建议？

谢谢。

Answer 1

您可以使用 v-badge 的 badge 插槽插入 div 和 1，并设置 div

的样式

在模板中，将class应用于v-badge（命名为"triangle"），并在[=13=中插入一个div ] 插槽以包含数字以及 class（名为 "my-badge"）：
```
<v-badge class="triangle">
  <template v-slot:badge>
    <div class="my-badge">1</div>
  </template>
</v-badge>
```

为 .triangle .v-badge__badge 和 .my-badge 添加 CSS 样式：

.triangle .v-badge__badge {
  /* remove border radius to allow icon to fill space */
  border-radius: 0;

  /* use a clip-path to form a quirky triangle */
  clip-path: polygon(100% 51%, 0 0, 3% 100%);

  height: 30px;
  width: 30px;
}

.my-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0.9em;
  font-size: 14px;
  height: 100%;
  color: #fff;
  background: green;
}

demo

Vuetify：如何创建三角形徽章？

Vuetify: How to create a triangle badge?

vue.js

vuetify.js