Как сделать такие разрывы в border?

198

04 января 2022, 00:50

С помощью псевдоэлэментов, градиента или же другие методы?

Answer 1

Как уже написал @Stranger in the Q, вам нужна окантовка дочернего элемента, который будет перекрывать border родителя.
Окантовку проще всего сделать при помощи box-shadow.

Цвет фона элемента и цвет box-shadow должны быть того же цвета что и фон, в вашем случае - белым цветом.

.border { 
  display: block; 
  width: 200px; 
  height: 100px; 
  border: 1px solid green; 
  border-radius: 10px; 
  margin-top: 40px; 
} 
 
.icon { 
  display: block; 
  width: 50px; 
  height: 50px; 
  margin: -25px auto 0; 
  border: 1px solid green; 
  border-radius: 100%; 
  background: #fff; 
  box-shadow: 0 0 0 10px #fff; 
} 
 
#change:checked ~ .border > .icon { 
  box-shadow: 0 0 0 10px red; 
}

<input id="change" type="checkbox"> <label for="change">Сменить цвет box-shadow</label> 
 
<div class="border"> 
  <div class="icon"></div> 
</div>

Если же нужно провернуть такую процедуру с более сложным фоном, например картинкой, то придётся обратиться за помощью к SVG.

Answer 2

Вот ещё как вариант. Только больно объемно получается.

body { 
  padding: 50px; 
} 
 
.body:before, 
.body:after { 
  content: ""; 
  display: block; 
  position: absolute; 
  width: 50%; 
  height: 100%; 
  top: 0; 
  bottom: 0; 
} 
 
.body:before { 
  left: 0; 
  background-color: white; 
} 
 
.body:after { 
  right: 0; 
  background-color: wheat; 
} 
 
.box { 
  display: block; 
  position: relative; 
  margin: 0px 0; 
  width: 100%; 
  height: 180px; 
  border-left: 1px solid red; 
  border-right: 1px solid red; 
} 
 
.box__top { 
  display: block; 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
} 
 
.box__top { 
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
} 
 
.box__top:before, 
.box__top:after { 
  content: ''; 
  display: block; 
  position: absolute; 
  top: 0; 
  height: 1px; 
  width: 50%; 
} 
 
.box__top:before { 
  left: 0; 
  margin-left: -45px; 
  border-top: 1px solid red; 
} 
 
.box__top:after { 
  right: 0; 
  margin-right: -45px; 
  border-top: 1px solid red; 
} 
 
.top { 
  display: block; 
  position: relative; 
  margin: 0 auto; 
  width: 70px; 
  height: 70px; 
} 
 
.top__icon { 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: -35px; 
  margin: 0 auto; 
  width: 70px; 
  height: 70px; 
  border: 1px solid red; 
  border-radius: 70px; 
} 
 
.top__icon:after { 
  content: 'иконка'; 
  display: block; 
  position: absolute; 
  top: 0px; 
  left: 0px; 
  right: 0; 
  bottom: 0; 
  line-height: 70px; 
  text-align: center; 
  color: red; 
  font-size: 12px; 
} 
 
.box__bottom { 
  display: block; 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
} 
 
.box__bottom { 
  display: block; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
} 
 
.box__bottom:before, 
.box__bottom:after { 
  content: ''; 
  display: block; 
  position: absolute; 
  bottom: 0; 
  height: 1px; 
  width: 50%; 
} 
 
.box__bottom:before { 
  left: 0; 
  margin-left: -60px; 
  border-bottom: 1px solid red; 
} 
 
.box__bottom:after { 
  right: 0; 
  margin-right: -60px; 
  border-bottom: 1px solid red; 
} 
 
.bottom { 
  display: block; 
  position: relative; 
  margin: 0 auto; 
  width: 100px; 
  height: 25px; 
} 
 
.bottom__icon { 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: -12px; 
  margin: 0 auto; 
  width: 100px; 
  height: 25px; 
  border: 1px solid red; 
  background-color: red; 
  border-radius: 3px; 
  line-height: 25px; 
  text-align: center; 
  font-size: 14px; 
  color: #fff; 
  cursor: pointer; 
}

<div class="body"></div> 
<div class="box"> 
  <div class="top__icon"></div> 
  <div class="box__top"> 
    <div class="top"></div> 
  </div> 
  <div class="box__bottom"> 
    <div class="bottom"></div> 
  </div> 
  <div class="bottom__icon">Рассчитать</div> 
</div>