我如何用CSS制作圆形边框？

fdbelqdn 于 2022-12-05 发布在其他

关注(0)|答案(2)|浏览(149)

我指的是复选图标外的绿色圆形边框。目前，我已经将整个圆圈围绕在复选图标周围，但我真的很困惑如何引入左上角的小切口。
代码如下：

<div v-if="verified" class="flex justify-center items-center border-3 border-green rounded-full">
  <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>

有SVG，我使用的是Tailwind，所以bordering类就在<div>中。任何建议/帮助都是非常感谢的，谢谢！

css

来源：https://stackoverflow.com/questions/74283903/how-can-i-make-rounded-border-with-css

2条答案

按热度按时间

xdyibdwo1#

你可以这样做：
第一个
如果你想隐藏一些其他部分，你只需要改变旋转值。

赞(0）回复(0）举报 2022-12-05

jpfvwuh42#

我已经添加了一个解决方案，如何用tailwind编写它
https://play.tailwindcss.com/OLqtK5HSba

<div class="p-24 flex items-center justify-center">
  <div class="flex relative justify-center items-center w-auto border-[3px] border-green-400 rounded-lg px-8 py-3 
  before:block before:absolute before:-left-[3px] before:-top-[3px] before:w-[calc(50%+3px)] before:h-[calc(50%+3px)] z-10 before:bg-white">
    <span class="relative z-20">Your Button</span>
  </div>
</div>

赞(0）回复(0）举报 2022-12-05

我来回答

我如何用CSS制作圆形边框？

2条答案

相关问题

热门标签

最新问答