Красивый рекламный блок, пронизанный линией

11.01.2021

Основная идея - создать блок, в котором расположены несколько заголовков пронизанных вертикальной линией так, что виден задний фон.

Такое проще показать, чем объяснить:

pic1

Сразу приведу код:

HTML

 
<div class="block">
    <div class="block__content">
        <div class="block__title">
            Какой-то крупный заголовок
        </div>
        <div class="block__subtitle">
            Маленький заголовок
        </div>
    </div>
</div>

CSS

 
body {
    background-color: #D0D0D0;
}

.block {
    background-color: #EE6E39;
    width: 400px;
    height: 320px;
    margin: 100px auto 0;
    padding: 50px;
}

.block__content {
    width: 300px;
    padding: 0 40px;
    border: 10px solid #ff43aa;

    border-image: linear-gradient(to right, transparent calc(50% - 5px), #ff43aa calc(50% - 5px));
    border-image-slice: 1;
}

.block__title {
    font-size: 32px;
    text-align: center;
}

.block__title::before,
.block__title::after {
    content: "";
    display: block;
    background-color: #ff43aa;
    width: 10px;
    height: 100px;

    margin: auto; /*!*/
}

.block__title::after {
    height: 50px;
}

.block__subtitle {
    display: block;
    text-align: center;
    font-size: 22px;
    line-height: 50px;
    color: white;
    padding: 0;
    margin: 0;
}

.block__subtitle::after {
    content: "";
    display: block;
    background-color: #ff43aa;
    width: 10px;
    height: 30px;

    margin: auto; /*!*/
}

Основные свойства, на которые нужно обратить внимание, это:

 
    border-image: linear-gradient(to right, transparent calc(50% - 5px), #ff43aa calc(50% - 5px));
    border-image-slice: 1;

- для контейнера (.block__content ).

А для псевдоэлементов ::after и ::before заголовков, это 

 
margin: auto; /*!*/

- это нужно для выравнивания вертикальных полос по середине.

Для наглядности заменим у контейнер linear-gradient с transparent на red:

pic1

Получается, что "магия" в linear-gradient, который создает рамку, половина которой прозрачная.

Известная проблема

При ресайзе окна css calc не пересчитывается и происходит небольшое выпирание вертикальных линий.

Категории: Web, HTML, CSS
Пометки: рамка
Яндекс.Метрика