html - 元素周围的 css 剪切边框/形状

Question

我什至不确定这是否可行，我希望在元素周围制作一个透明的“边框”/切口。如下图所示，重点是让背景显示在中心的洋红色元素和灰色元素之间。

到目前为止，我所管理的只是洋红色元素周围的纯色边框。使用以下类(class)，这给了我想要的结果，但仅限于白色背景。

.app.center {
  height: 40px;
  width: 28px;
  z-index: 5000;
  border-radius: 3px;
  box-shadow: 0 0 0 3px white;
}

查看此 fiddle对于我的整个 CSS。

按照评论中的建议设置透明边框并不能解决我的问题(在 FF40 中测试)。我试图在我的中间 div 元素(洋红色元素)周围创建一个透明间隙。在此元素上设置透明边框不起作用。

我正在寻找一种方法来剪辑落在中间 div 后面的同级 div，以便在中间元素的任一侧都可以看到一小块背景，它遵循中心元素的边缘/形状。

Answer 1

是的，这基本上是不可能的。这就是我试图提供答案的原因:-)

我的解决方案不适用于 IE，并且限制您在元素中使用原色。据我所知，这是获得此结果的唯一方法。

诀窍是使用混合模式，将灰色转换为透明。并且元素的边框将是灰色的，因此将显示底层背景

.bkg {
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}

.button {
	width: 100px;
	height: 100px;
	border-radius: 20%;
	border: solid 10px gray;
	position: absolute;
	font-size: 80px;
}

#bt1 {
	left: 40px;
	top: 20px;
	background-color: red;
}

#bt2 {
	left: 80px;
	top: 90px;
	background-color: rgb(255,0,255);
}

.panel {
	position: absolute;
	top: 0px;
	width: 200px;
	height: 200px;
	mix-blend-mode: hard-light;
}

<div class="bkg"></div>
<div class="panel">
    <div class="button" id="bt1">-1-</div>
    <div class="button" id="bt2">-2-</div>
</div>