遮盖部分边框

Question

是否可以像上图一样在特定位置屏蔽 div 边框？

某种 div 掩盖了另一个 div，而不设置

background-color

（因为整个网站的背景是渐变的）。

我不想使用 SVG，因为我想保留边框属性可供使用。

我尝试使用带有

mask

属性的伪元素，其内部有一个黑色 SVG 矩形，但边框仍然可见（即使我在没有

.card

的情况下在

::after

div 内部放置了一个遮罩。

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 2rem;
  border: 1px solid var(--border-color);
  border-radius: 2vw;
}

.card::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 10px;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-mask: url("../../assets/rect-mask.svg");
  mask: url("../../assets/rect-mask.svg");
}

Answer 1

您可以使用

clip-path

：

.box {
  --s: 80px; /* size of the cut */
  
  width: 250px;
  aspect-ratio: 1;
  position: relative;
  margin: 10px,
}

.box:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid red;
  border-radius: 20px;
  clip-path: polygon(0 0,calc(50% - var(--s)/2) 0,calc(50% - var(--s)/2) 50%,calc(50% + var(--s)/2) 50%,calc(50% + var(--s)/2) 0,100% 0,100% 100%,0 100%);
}

<div class="box"></div>