css - 如何创建带间隙的圆形边框？

Question

我正在尝试创建带有圆 Angular 以及 Angular 和直线之间的间隙的块和元素。事实证明它有点困难:)

我还必须像这样创建“按钮”，

和

如果我不能在纯 CSS 中创建它们，我将为此使用 svg，但我必须先解决上述问题。
有人有什么想法吗？

Answer 1

看起来像是 border-image 的工作.

const grab = document.getElementById('grab');
console.log("url('data:image/svg+xml;base64,"+btoa(grab.innerHTML.replace(/\r?\n */g,''))+"')");

.border-gap {
  border: 16px solid;
  border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGQ9Ik0xLDEzIEExMiwxMiAwIDAgMSAxMywxTTE5LDEgSDI5TTM1LDEgQTEyLDEyIDAgMCAxIDQ3LDEzTTQ3LDE5IFYyOU00NywzNSBBMTIsMTIgMCAwIDEgMzUsNDdNMjksNDcgSDE5TTEzLDQ3IEExMiwxMiAwIDAgMSAxLDM1TTEsMjkgVjE5Ij48L3BhdGg+PC9zdmc+') calc(100% * 19 / 48);
  padding: 8px;
}

<div class="border-gap">Text</div>

<template id="grab">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
    <path stroke="black" stroke-width="2" stroke-linecap="round" fill="none" d="
      M1,13 A12,12 0 0 1 13,1
      M19,1 H29
      M35,1 A12,12 0 0 1 47,13
      M47,19 V29
      M47,35 A12,12 0 0 1 35,47
      M29,47 H19
      M13,47 A12,12 0 0 1 1,35
      M1,29 V19
    " />
  </svg>
</template>

我已经包含了我使用的 SVG 以及获取 data: 的方法它的 URL，然后可以放入 border-image .