Как правильно верстать фигурные блоки?

Question

[Shakigen]

Здравствуйте, возник вопрос( и проблема) по поводу верстки. Нужно сверстать фигурные блоки "стрелки", которые растягиваются на всю ширину, вот стою в тупике и не знаю что делать.
Вот пример работы:

Буду рад если поможете, а еще больше, если объясните)

Comments

[Ankhena]

clip-path
градиенты
градиенты для псевдоэлементов
рецепты из статей "фигуры на css" и "ленточки на css"

Уточните, пожалуйста, что именно вы пробуете и что не получается?

[Shakigen]

Ankhena, Я пытаюсь организовать через transform. Не получается добиться такой формы.

[Lord_Dantes]

Shakigen, попробуйте сделать так как вам посоветовали выше в комментариях. А далее задавайте вопрос если возникнут трудности.

[Shakigen]

Lord_Dantes, Ankhena, получилось слепить из двоих элементов, но возможно ли через transform сделать подобное одним элементом?
https://codepen.io/Shakigen/pen/YzNJNMN

[Ankhena]

Shakigen, skewY(10deg)

Не получается добиться такой формы.

Покажите, что вы делаете в песочнице на jsfiddle.net

[Ankhena]

Shakigen, https://jsfiddle.net/k9f8voy3/

но возможно ли через transform сделать подобное одним элементом?

Мне кажется, будут проблемы с расчетами при переполении. Это кроме проблем с расчетами трансформа.

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

[Shakigen]

Ankhena, на jsfiddle.net "тестирую" отдельные элементы верстки.

[Shakigen]

Ankhena, Благодарю, от души)

[Elena Fire]

Shakigen, через псевдоэлементы :after и :before - стабильно все будет показывать при правильном позиционировании.

Answer 1

[strelok011]

Думаю, вам помогут clip и mask.
Работает и просто в css и с помощью svg
Генератор css clip
Обрезка и маска svg
Ну и в инете по этим словам найти уроки и примеры не составит труда

Answer 2

[Дмитрий Поляков]

Возможно что-то такое?
htmlbook.ru