Как с помощью CSS сделать наклонные края?

Question

[mikael_akopyan]

В общем есть фон с градиентом. В нижней части необходимо сделать "скошеный" край как на макете. Вроде нашел решение. Там есть 2 способа как это реалтзовать.

1. CSS clip-path (этот метод не подошел т. к. у него малая кроссбраузерность
   
2. CSS генерируемый контент (этот не подошел, потому что предназначен только для блоков со сплошным цветом)
   

Comments

[Astrohas]

пожалуйста отметьте решением ответ simka alien https://toster.ru/answer?answer_id=1047447

Answer 1

[alvvi]

Есть, к слову, хорошая статья на эту тему, может кому-то пригодится: клик

Comments

[mikael_akopyan]

Спасибо большое!)

Answer 2

[Ankhena]

Множественный фон с градиентом - решение в один div: https://jsfiddle.net/2oLv9zmw/

background: linear-gradient(5deg, #fff 0, #fff 100px, transparent 101px),
  linear-gradient(to bottom, #ffc826, #9f19ff, #00aee7);

Угол наклона, цвета, место перехода из белого в цветной - на ваш вкус.

Answer 3

[simka alien]

https://codepen.io/simkaUser/full/yXELGL/ так вроде

Answer 4

[Алексей Скляров]

Создаете прямоугольный блок через :before, к нему применяете skew().

Answer 5

[Astrohas]

::after
сделайте псевдоэлемент в виде треугольника

Answer 6

[kn1ght_t]

я бы тупо все одним джпегом сделал (вместе с телефоном), в любом случае одна png с телефоном будет весить больше)
смысла нет так заморачиваться