линию не сложно
тег заголовка абсолютом ставишь на линию родителя
у заголовка линия слева и вверху
и псевдо елементом эта наклонная линия делается
фон у заголовки белы и он перекроет линию родителя
Это мне посоветовали.
вот что у меня получилось
<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;
}
}