是否可以在多个 div 的相交区域内设置 hide/remove 边界?
Is it possible to hide/remove borders inside of intersected area of multiple divs?
当两个或多个 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>
问题是是否可以隐藏相交区域内的那些边框,因此看起来只有一个大形状。以上面的例子为例,结果应该是这样的:
根据您的第一个查询,使用 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>
您可以尝试使用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>
另一种可能性是 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>
当两个或多个 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>
问题是是否可以隐藏相交区域内的那些边框,因此看起来只有一个大形状。以上面的例子为例,结果应该是这样的:
根据您的第一个查询,使用 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>
您可以尝试使用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>
另一种可能性是 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>