html - 使边框夹住其他元素并显示背景内容

Question

我正在尝试创建一个微调器，其中两个点相交，最前面的一个点应剪切另一个点，让背景在交叉点的几个像素上可见。

如果 CSS 无法做到这一点，那么使用 SVG 是可以的，但目前我无法在这两种技术中找到实现该效果的方法。

我试过使用 clip-path 但它似乎没有做我想做的事情。

想法？

body {
  background-image: linear-gradient(to right, yellow 0%, purple 100%);
}

.a, .b {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  top: 5em;
  left: 50vw;
  border: 4px solid white;
}

.a {
  background: red;
}

.b {
  background-color: blue;
  margin-left: 30px;
}

<div class="a"></div>
<div class="b"></div>

Answer 1

这在 SVG 中很容易做到。但是你会想要使用 <mask>而不是 <clipPath> .

body {
  background-image: linear-gradient(to right, yellow 0%, purple 100%);
}

svg {
  margin: 5em 0 0 50vw;
}

<svg width="80" height="50">
  <defs>
    <mask id="clipred">
      <rect width="100%" height="100%" fill="white"/>
      <circle cx="55" cy="25" r="29" fill="black"/>
    </mask>
  </defs>

  <circle cx="25" cy="25" r="25" fill="red" mask="url(#clipred)"/>
  <circle cx="55" cy="25" r="25" fill="blue"/>
</svg>