如何用Tailwind CSS实现带左上角缺口的圆形验证图标边框？

直接用Tailwind的伪元素就能实现，不用额外写自定义CSS，修改后的完整代码如下：

<div v-if="verified" class="flex justify-center items-center relative border-3 border-green rounded-full before:content-[''] before:absolute before:top-[-3px] before:left-[-3px] before:w-[6px] before:h-[6px] before:bg-white before:rounded-br-md">
  <svg viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3">
    <path
      d="m10.51 4.525-3.6 3.6-1.65-1.65a.636.636 0 0 0-.9.9l2.1 2.1a.636.636 0 0 0 .9 0l4.05-4.05a.636.636 0 0 0-.9-.9z"
      fill="#fff"
    />
  </svg>
</div>

关键调整说明： #

• 给外层div加relative，作为伪元素的定位容器
• 利用before伪元素生成一个与背景同色的小方块，放在左上角覆盖边框，模拟缺口效果：
  • top-[-3px]和left-[-3px]：对应你设置的3px边框宽度，刚好覆盖左上角的边框段
  • w-[6px] h-[6px]：控制缺口的大小，数值越大缺口越宽
  • before:bg-white：必须改成这个组件所在的实际背景色，否则会露出色块而非缺口
  • rounded-br-md：让缺口的右下角带圆角，和圆形边框的风格统一

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo