vue3 使用css实现一个弧形选中角标样式

在Vue 3中，你可以使用CSS来创建一个弧形勾选标记样式。以下是一个简单的例子，展示了如何实现这个样式：

<template>
  <div class="arc-badge">
    <span class="arc-badge-text">99+</span>
  </div>
</template>
 
<script>
export default {
  // Vue 3 组件选项
};
</script>
 
<style scoped>
.arc-badge {
  width: 50px;
  height: 50px;
  background-color: #f00;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
 
.arc-badge::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: #f00;
  border-radius: 100% 0 0 0;
  transform: translate(50%, -50%);
}
 
.arc-badge-text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
</style>

这个例子中，.arc-badge 创建了一个圆形背景，.arc-badge::before 伪元素用来创建弧形的选中区域，.arc-badge-text 用来放置文本内容。通过调整 .arc-badge 和 .arc-badge::before 的尺寸和颜色，你可以自定义弧形的样式。