Как лучше сделать такой блок на css?

Question

[WebforSelf]

Есть такой фон у блока, не хотел накладывать его в виде png , как возможно сделать адаптивно? наложить с помощью clip path и псевдоэлемента? или это так себе метод?

Comments

[Андрей Федоров]

это background linear-gradient

[Softlink]

Можно попробовать сгенерировать похожий паттерн тут

[WebforSelf]

Андрей Федоров, разве тут градиентом справишься?

[Андрей Федоров]

WebforSelf, тут 4 градиента, каждый из которых повернут на свой угол и ограничен по размеру

[Ankhena]

Поддерживаю про 4 градиента.

[WebforSelf]

Ankhena, Что то попробовал с 2 сделать, нифига не вышло, а вот 4 хоть убейте не вижу. Пока вижу что clip path только сделать, но с 4 градиентами интересно было бы глянуть.

[Ankhena]

WebforSelf, один красный и 3 серых

[WebforSelf]

Ankhena, почему не не работает translateY?

[Ankhena]

WebforSelf, потому что вы перебиваете свойство transform 2 раза вместо того, чтобы задать множественную трансформацию.

Решать это в 4 дива это ужасно.
Еще и контент в чем-то писать придется.

[WebforSelf]

Ankhena, а как задать градиенты? через before, after?

[Ankhena]

WebforSelf, прям так, через запятую прямо к единственному диву.
Так мне что-то неохота это делать...

[WebforSelf]

Ankhena, понятно, можно хотя бы примерно, я попробую

[Ankhena]

WebforSelf, https://jsfiddle.net/0oten8yL/1/
и потом немножко тригонометрии для адаптива :)

Нижний, который в макете красный, можно через псевдо и трансформы сделать.

[WebforSelf]

Ankhena, Жесть, не умел такие вещи на градиенте делать)

[Ankhena]

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

Либо перестать умничать и взять SVG :)

[WebforSelf]

Ankhena, svg , canvas те вещи к которым только начинаю подходить

[WebforSelf]

Ankhena, похоже все таки не получится градиентом из за этих углов



Как ни крутил)

[Ankhena]

WebforSelf, я, наверное, уже сплю. Что не так с углами?

[WebforSelf]

Ankhena,

Получается нет выступов, там фон который серый выступает в виде бугра) а с градинтом получается прямоугольник)

[Ankhena]

WebforSelf, яснее не стало, какой бугор, какой прямоугольник? Я вообще ни одного прямого угла не вижу в этой композиции.
Угол с градиентами острее, чем на макете? Поверните градиент на нужный угол. Я же значения от балды ставила.

Answer 1

[RAX7]

наложить с помощью clip path и псевдоэлемента?

А почему бы и нет. Вполне нормально получится. Альтернативное решение - использовать SVG в качестве background-image

P.s. можно упороться и рисовать такое градиентами, но уж очень это заморочено получится

UPD. Можно еще подложку полностью сделать на SVG, тогда вертикальные отступы внутри блока и высоту зигзага можно сделать пропорциональными ширине блока.