css 隐藏覆盖div的边框

des4xlb0 于 2023-03-20 发布在其他

关注(0)|答案(4)|浏览(180)

假设我有这两个div

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

div {
  border: 1px solid black;
  width: 50px;
  height: 25px;
}

<div class="el-1">
</div>
<div class="el-2">
</div>

我怎么能让他们看起来像这样？

不管我们以何种方式将它们合并在一起或使用SVG，但我需要背景保持透明

css

来源：https://stackoverflow.com/questions/75773173/hide-border-of-overlaying-divs

4条答案

按热度按时间

uemypmqf1#

有一个变通方案，这是使用::before选择器。要做一个白色的正方形，这将涵盖交叉线两个divs：

div {
  border: 1px solid black;
  width: 50px;
  height: 25px;
}

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

.el-2:before {
  content: '';
  top: -0.8px;
  left: -0.8px;
  height: 15px;
  width: 19.5px;
  display: block;
  position: absolute;
  background: white;
}

<div class="el-1">
</div>
<div class="el-2">
</div>

赞(0）回复(0）举报 2023-03-20

vaj7vani2#

所建议的方法涉及到覆盖的问题是我们想要去除的部分不是一个精确的矩形，在内角处有一点必须保留。
这个代码片段采用了不同的方法。它使用mix-blend-mode来选择每个div中两种颜色中较亮的一种。这样就去掉了位于div内部的黑色边框。
为了确保混合不涉及任何其他背景，div被放在一个隔离的容器中（新的staking上下文）。

body {
  /*for demo to show isolation works */
  background: #eee;
}

.containner {
  isolation: isolate;
}

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

.el-1,
.el-2 {
  border: 1px solid black;
  width: 50px;
  height: 25px;
  background: white;
  mix-blend-mode: lighten;
  box-sizing: border-box;
}

</style>

<body>
  <div class="container">
    <div class="el-1">
    </div>
    <div class="el-2">
    </div>
  </div>
</body>

注意：和其他方法一样，这意味着矩形的背景是白色的而不是透明的。

赞(0）回复(0）举报 2023-03-20

8yoxcaq73#

您可以使用父元素上的投影来近似它

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
}

div {
  width: 50px;
  height: 25px;
  background: #fff; /* a background is needed*/
}

body {
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
}

<div class="el-1">
</div>
<div class="el-2">
</div>

赞(0）回复(0）举报 2023-03-20

kcwpcxri4#

引入一个白色背景的第三格与第一格重叠怎么样？例如，

.el-1,
.el-2 {
  border: 1px solid black;
  width: 50px;
  height: 25px;
}

.el-2 {
  position: absolute;
  left: 40px;
  top: 20px;
  background: white;
}

.el-3 {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 50px;
  height: 25px;
  background: white;
}

<div class="el-1"></div>
<div class="el-2"></div>
<div class="el-3"></div>

赞(0）回复(0）举报 2023-03-20

我来回答

css 隐藏覆盖div的边框

4条答案

相关问题

热门标签

最新问答