Search code examples
htmlcsssvgcss-mask

Masking a part of a border

IMAGE

Is it possible to make a div border masked in a specific place like in the picture above?

Some kind of div masks another div without setting a background-color (because the background of a whole site is a gradient).

I don't want to use an SVG, cause I want to keep border properties available to use.

I tried to use pseudo elements with the mask property with a black SVG rectangle inside of it but the border is still visible (even if I placed a mask inside of the .card div without ::after.

.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");
}
Solution

  • You can use clip-path:

    .box {
  --s: 80px; /* size of the cut */
  
  width: 200px;
  aspect-ratio: 1;
  text-align: center;
  position: relative;
  margin: 50px;
}
/* your cut border */
.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%);
}
/**/

.box span {
  display: inline-block;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: blue;
  translate: 0 -50%; 
}
    <div class="box">
  <span></span>
</div>