бордер изменения

Question

как сделать прямоугольный бордер у которого будет как бы пробел сверху по центру, пример снизу -

Answer 1

.container {
  width: 500px;
  height: 300px;
  position: relative;
  margin: auto;
}

h1,
p {
  text-align: center;
}

.btl {
  position: absolute;
  border-top: 2px solid red;
  border-left: 2px solid red;
  width: 30%;
  height: 50%;
  top: 20px;
}

.bbl {
  position: absolute;
  border-bottom: 2px solid red;
  border-left: 2px solid red;
  width: 50%;
  height: 50%;
  bottom: 0;
}

.btr {
  position: absolute;
  border-top: 2px solid red;
  border-right: 2px solid red;
  width: 30%;
  height: 50%;
  top: 20px;
  right: 0;
}

.bbr {
  position: absolute;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
  width: 50%;
  height: 50%;
  bottom: 0;
  right: 0;
}

<div class="container">
  <div class="btl"></div>
  <div class="bbl"></div>
  <h1>ABOUT US</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>LDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="btr"></div>
  <div class="bbr"></div>
</div>

Вариант несколько костыльный, но всё же...

Answer 2

Как видите всё очень просто, поднимаете Заголовок, задаёте ему задний фон, боковые внутренние отступы для отступа от полос и готово.
Есть минус в том, что если заголовок длинный и вдруг захочет встать в две строчки, тогда центрирование заголовка к полоскам собьётся. Но можно либо сделать высоту заголовка рассчитанную на две строки, либо задать заголовку max-width-90% например и дать ему text-overflow: ellipsis что конечно не очень хорошо для SEO.

.wrapper-for-border {
  border: 1px solid black;
  padding: 20px;
  margin-top: 20px;
}
h1, p {
  text-align: center;
}

h1 {
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 20px;
  background-color: white;
  display: block;
  width: fit-content;
  background-color: white;
  margin: -35px auto 0;
}

<div class="wrapper-for-border">
  <h1>About Us</h1>
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letras</p>
</div>

БЛОГ НА HUSL

бордер изменения

Ответы (2 шт):