Html Question posted in
Some basic documentation can be found here.

Html – 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");
}
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    you can use a <fieldset> and <legend> elements..

    fieldset {
  border        : 4px solid red;
  border-radius : 2em;
  width         : 12em;
  }
legend {
  margin    : 0 auto;
  padding   : 0 1rem; /* make spaces around */
  font-size : 2rem;
  }
    <fieldset>
  <legend>&#128515;</legend>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,...
  </p>
</fieldset>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search