Возможно ли такой задний фон сделать только CSS стилями?

Question

Возможно ли такой задний фон сделать только CSS стилями?

Рейтинг: 0Ответов: 2Опубликовано: 13.04.2023

На этой картинке будет какой-то контент и при адаптиве он по высоте расширяется.

И вопрос в следующем, как можно данную форму заднего фона сделать только на css?

css html

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Если это именно задний фон, то вариантов дохрена.

clip-path, как вам показали в комментариях, у элемента, спозиционированного позади. Или у псевдоэлемента.
transform:skew(0deg, 5deg) у псеводэлемента :before и transform:skew(0deg, -5deg) - у :after. Ну и плюс прочие свойства.
фон из двух косых градиентов:

{
background-image: linear-gradient(4deg, transparent, 
transparent 20px, gray 20px, gray calc(100% - 20px), 
transparent calc(100% - 20px)), linear-gradient(-4deg, 
transparent, transparent 20px, gray 20px, gray calc(100% - 
20px), transparent calc(100% - 20px));

background-size: 50% 100%, 50% 100%;

background-position: top left, top right;

background-repeat: no-repeat no-repeat;
}

Можно еще повыделываться...

Answer 2

▲ 0

примерный эскиз блоков можно вот так дальше на усмторение

.block1 {
    display: inline-block;
    margin-top: 70px;
    margin-left: 90px;
    background-color: gray;
    height: 150px;
    width: 300px;
    transform: rotate(25deg);
}

.block2 {
    display: inline-block;
    margin-top: 70px;
    margin-left: -95px;
    background-color: gray;
    height: 150px;
    width: 300px;
    transform: rotate(-25deg);
}

<div class="block1"></div>
<div class="block2"></div>

Возможно ли такой задний фон сделать только CSS стилями?

Ответы