是否可以在多个 div 的相交区域内设置 hide/remove 边界？

Question

当两个或多个 div 相交时，它们只是重叠并且它们的边界是可见的：

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid black;
}

#two {
  left: 50px;
}

#three {
  left: 100px;
}

<div >
  <div class="circle" id="one"></div>
  <div class="circle" id="two"></div>
  <div class="circle" id="three"></div>
</div>

问题是是否可以隐藏相交区域内的那些边框，因此看起来只有一个大形状。以上面的例子为例，结果应该是这样的：

Answer 1

根据您的第一个查询，使用 CSS 无法使相交边界不可见。但是，如果你想实现上述设计，你可以使用伪元素技巧来实现。您可以为“#two”id 创建伪元素，并使其相对于中心 div 的高度和宽度绝对定位。您肯定需要进行一些调整。我已经为你添加了片段。请尝试一下。

.circle {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid black;
          }

          #two {
            left: 50px;
            background: #fff;
          }

          #two:after {
            content: "";
            background: #fff;
            width: 100%;
            height: 88px;
            top: 6px;
            left: -2px;
            position: absolute;
            z-index: 9;
            -ms-transform: rotate(20deg);
            transform: rotate(.2deg);
          }

          #three {
            left: 100px;
            background: #fff;
          }

<div >
  <div class="circle" id="one"></div>
  <div class="circle" id="two"></div>
  <div class="circle" id="three"></div>
</div>

Answer 2

您可以尝试使用mask并稍微调整代码以获得更好的控制。诀窍是使用多个蒙版，其中每个蒙版都是一个仅显示边框的圆形渐变，每个渐变将与每个圆形元素重叠。您可以使用中心元素上的边距来控制重叠：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
  transition:0.5s;
}

.box {
  display:inline-flex;
  -webkit-mask:
     radial-gradient(50px at 52px              50%,transparent 99%,#fff 100%),
     radial-gradient(50px at 50%               50%,transparent 99%,#fff 100%),
     radial-gradient(50px at calc(100% - 52px) 50%,transparent 99%,#fff 100%);
  mask:
     radial-gradient(50px at 52px              50%,transparent 99%,#fff 100%),
     radial-gradient(50px at 50%               50%,transparent 99%,#fff 100%),
     radial-gradient(50px at calc(100% - 52px) 50%,transparent 99%,#fff 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

/* You can also have animation*/
.box:hover .circle{
   margin:0!important;
}

<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -50px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -30px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -70px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -10px;"></div>
  <div class="circle"></div>
</div>

并使用 CSS 变量以更好地控制：

.circle {
  width: calc(2*var(--r));
  height: calc(2*var(--r));
  border-radius: 50%;
  border: var(--b) solid black;
}

.box {
  --r:50px; /* radius of circles*/
  --b:2px;  /* border length */
  --g:transparent 99%,#fff 100%;
  
  display:inline-flex;
  -webkit-mask:
     radial-gradient(var(--r) at calc(var(--r) + var(--b))        50%,var(--g)),
     radial-gradient(var(--r) at 50%                              50%,var(--g)),
     radial-gradient(var(--r) at calc(100% - var(--r) - var(--b)) 50%,var(--g));
  mask:
     radial-gradient(var(--r) at calc(var(--r) + var(--b))        50%,var(--g)),
     radial-gradient(var(--r) at 50%                              50%,var(--g)),
     radial-gradient(var(--r) at calc(100% - var(--r) - var(--b)) 50%,var(--g));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

<div class="box">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -50px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:40px;--b:5px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -30px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:100px;--b:20px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -70px;"></div>
  <div class="circle"></div>
</div>
<br>
<div class="box" style="--r:80px;--b:5px;">
  <div class="circle"></div>
  <div class="circle" style="margin:0 -10px;"></div>
  <div class="circle"></div>
</div>

Answer 3

另一种可能性是 mix-blend-mode 如果可用：

 /* === HERE ==== comment where it matters , the rest is only styling */
div {
  width: 20vmax;
  height: 20vmax;
  border: solid;
  background: white;/* === HERE ====*/
  border-radius: 50%;
  margin: auto;
  position: relative;
  font-size:4vmax;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 10px, inset 0 0 2px;
  animation:shift 4s infinite ease-in-out alternate;
}
div::before,
div::after {
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  border: inherit;
  border-radius: inherit;
  box-shadow:inherit;
  mix-blend-mode:screen;/* === HERE ====*/
  animation:shift 2s infinite ease-in-out alternate;
}
div::before {
  left:-50%;
}
div::after {
  left:50%;
  animation-delay:-1s;
}
p {z-index:1;}
@keyframes shift {
25% {transform:translate(5%,-5%) scale(1.2);}
50% {transform:translate(-5%,5%) scale(0.9);}
}
html {display:flex;min-height:100vh;}
body {margin:auto;}

<div><p>Hi, Cloudy</p></div>

demo for the fun

是否可以在多个 div 的相交区域内设置 hide/remove 边界？

Is it possible to hide/remove borders inside of intersected area of multiple divs?

html

css

css-shapes