1

Как сделать блок с такой рамкой

линию не сложно тег заголовка абсолютом ставишь на линию родителя у заголовка линия слева и вверху и псевдо елементом эта наклонная линия делается фон у заголовки белы и он перекроет линию родителя Это мне посоветовали. вот что у меня получилосьмое

что я делаю не так?csshtml

<setion class="popup">
        <div class="container">
            <div class="row">
                <col-6>
                    <div class="popup__title-wrapper">
                        <h1>Бизнес центр Space Tower / Офисное помещение 1862 кв.м</h1>
                        <div><span>
                            Здание
                        </span><span >
                            Офисное помещение
                          </span></div>
                    </div>
                    <div class="card">
                        <h2 class="title card__title">
                            Параметры здания 
                        </h2>
                        <div class="card__body-card">
                            <div class="card__body-card-item">
                                <span>Адрес:</span><span> Шмитовский проезде, 37</span>
                            </div>
                        </div>
                    </div>
                </col-6>
                <col-6>
                    <div class="btn-wrapper">
                        <a href="#" class="btn"></a>
                    </div>
                </col-6>
            </div>
        </div>
    </setion>

.popup {
  &__title-wrapper {
    padding-bottom: 100px;
  }
}

.card {
  position: relative;

  &__title {
    border-top: solid 1px #979797;
    border-left: solid 1px #979797;
    width: 30%;
    font-weight: 700;
    font-family: $secondaryFont;
    padding: 14px 54px;
    font-size: 15px;
    position: absolute;
    top: -44px;
    left: 0;
    background-color: $waht;

    &::before {
      content: "";
      width: 53px;
      height: 1px;
      background-color: #979797;
      position: absolute;
      right: -14px;
      top: 21px;
      transform: rotate(58deg);
    }
  }

  &__body-card {
    width: 802px;
    min-height: 400px;
    border: solid 1px #979797;
    padding: 56px;
  }

  &__body-card-item {
    display: flex;
    justify-content: space-between;
  }
}

3
  • Добрый вечер! Не могли бы Вы выложить свой код не скриншотами, а прямо в формате кода, выделив его тремя косыми кавычками ( ` )?
    – 4500zenja
    18 янв 2022 в 23:20
  • 1
    и overflow:hidden; не помогает 18 янв 2022 в 23:26
  • @ВиталийДякин заментите top right left на margin-top margin-right margin-left
    – Arcadiy
    18 янв 2022 в 23:47

3 ответа 3

2

На лучшее решение не претендую, ложился спать уже, перед сном головоломку захотелось...

.card {
  position: relative;
}

.card__title {
  width: 30%;
  font-weight: 700;
  padding: 0 54px;
  font-size: 15px;
  position: relative;
  margin: 0;
  height: 45px;
  display: flex;
  align-items: center;
  background: #eee;
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0% 100%);
  /*background-color: $waht;*/
}

.card__body-card {
  width: 802px;
  min-height: 400px;
  border: solid 1px #979797;
  padding: 56px;
}

.card__body-card-item {
  display: flex;
  justify-content: space-between;
}
<div class="card">
  <h2 class="title card__title">
    Параметры здания
  </h2>
  <div class="card__body-card">
    <div class="card__body-card-item">
      <span>Адрес:</span><span> Шмитовский проезде, 37</span>
    </div>
  </div>
</div>

4
  • 1
    Спасибо. Но нужно без линии 18 янв 2022 в 23:51
  • @ВиталийДякин с border без доп линии такое сделать будет тяжело я думаю. По крайне мере, я вспомнить не могу как сделать. Но если убрать border и использовать заливку, можно довольно легко реализовать (я свой код подправил, посмотрите)
    – Pilaton
    19 янв 2022 в 0:00
  • @Pilaton уберите везде бордеры и сделайте заливку везде, думаю норм вариант
    – Arcadiy
    19 янв 2022 в 0:03
  • Всем спасибо!!!! 19 янв 2022 в 0:05
2

.box {
  max-width: 500px;
  width: 50%;
  margin: 150px auto 0;
  border: 1px solid grey;
  position: relative;
  padding: 15px;
}

.box__title {
  position: absolute;
  top: -40px;
  left: -1px;
  padding-left: 15px;
  padding-right: 50px;
  background-color: white;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid grey;
  border-left: 1px solid grey;
}

.box__title:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 30px;
  display: block;
  right: -12px;
  top: -1px;
  border-right: 1px solid grey;
  border-bottom: 1px solid white;
  transform: skew(30deg, 0);
  box-sizing: border-box;
}
<div class="box">
  <div class="box__title">
    <span>werskbjds</span>
  </div>
  <div class="box__content">
    dgfgdsg
  </div>
</div>

1
2

Если использовать background: linear-gradient и "технику" отрисовки линий этим правилом, можно сделать более универсальное решение, которое может растягиваться относительно высоты дочернего блока.

:root {
  --tabs-border-weight: 1px;
  --tabs-border-color: #666;
  --tabs-background: #ccc;
}

body {padding: 20px; box-sizing: border-box;}

.block__tabs {
  display: block;
  width: 100%;
  margin-bottom: calc(var(--tabs-border-weight) * -1);
}

.block__tabs-item {
  display: inline-block;
  max-width: calc(100% - 30px);
  border-left: var(--tabs-border-weight) solid var(--tabs-border-color);
  border-top: var(--tabs-border-weight) solid var(--tabs-border-color);
  background: var(--tabs-background);
  padding: .5em 1em;
  box-sizing: border-box;
  position: relative;
}

.block__tabs-item::after {
  content: '';
  display: block;
  width: 1.5em;
  height: 100%;
  background: linear-gradient(to left bottom, 
    transparent calc(50% - (var(--tabs-border-weight) / 2 + .25px)),
    var(--tabs-border-color),
    var(--tabs-background) calc(50% + (var(--tabs-border-weight) / 2 + .25px)));
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  
}

.block__message {
  display: block;
  border: var(--tabs-border-weight) solid var(--tabs-border-color);
  background: var(--tabs-background);
  min-height: 2em;
  padding: 10px;
  box-sizing: border-box;
}
<div class="block">
  <div class="block__tabs">
    <div class="block__tabs-item">Заголовок</div>
  </div>
  <div class="block__message"></div>
</div>
<br><br>
<div class="block">
  <div class="block__tabs">
    <div class="block__tabs-item">Заголовок<br>Новая строка</div>
  </div>
  <div class="block__message"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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