使邊框剪輯其他元素並顯示背景內容

我想創建一個微調器，其中兩個點相交，最前面的一個應該剪輯另一個讓背景在幾個交叉點像素上可見。使邊框剪輯其他元素並顯示背景內容

它會好起來使用SVG如果CSS是沒有這個能力，但在現階段，我不能找到一種方法來實現既沒有技術的效果。

我試過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>

來源

2017-05-16 Fez Vrasta

很容易在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>

來源

2017-05-16 18:16:40

使邊框剪輯其他元素並顯示背景內容

回答

相關問題