1

как сделать рамку как на скриншоте?

введите сюда описание изображения

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

.about {
  background-color: #fff;
  padding-top: 100px;
}
.about__title {
  font-size: 30px;
  overflow: hidden;
}
.about__title::before, .about__title::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 1px;
  background: #000;
  border: solid #fff;
  border-width: 0px 50px;
  overflow: hidden;
}
.about__title::before {
  margin-left: -100%;
}
.about__title::after {
  margin-right: -100%;
}
.about__subtitle {
  font-size: 16px;
}
.container {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}
.wrapper {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
<div class="about">
    <div class="container">
        <div class="wrapper">
            <p class="about__title title">ABOUT US</p>
            <p class="about__subtitle"> Our approach unifies design, development and product management to create exceptional products. We start each project by understanding your business goals, the user’s needs and the product requirements. Then we help translate them into effective and elegant solutions.
            </p>
        </div>
    </div>
</div

1
  • 2
    <fieldset> <legend> Commented 7 окт. 2020 в 15:12

1 ответ 1

6

.about {
  background-color: #fff;
  padding-top: 100px;
}

.about__title {
  position: relative;
  top: -20px;
  left: 0;
  font-size: 30px;
  overflow: hidden;
}

.about__title::before,
.about__title::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 1px;
  background: #000;
  border: solid #fff;
  border-width: 0px 50px;
  overflow: hidden;
}

.about__title::before {
  margin-left: -100%;
}

.about__title::after {
  margin-right: -100%;
}

.about__subtitle {
  font-size: 16px;
}

.container {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.wrapper {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
<div class="about">
  <div class="container">
    <div class="wrapper">
      <p class="about__title title">ABOUT US</p>
      <p class="about__subtitle"> Our approach unifies design, development and product management to create exceptional products. We start each project by understanding your business goals, the user’s needs and the product requirements. Then we help translate them into effective
        and elegant solutions.
      </p>
    </div>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.