У меня есть два div
с отдельным градиентным фоном, и мне нужно создать кривую S-Shape
между ними.
Вот пример скрипта для градиентных div: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/
<div id="section1">
</div>
<div id="section2">
</div>
#section1{
height:200px;
background: linear-gradient(to bottom right, #ad3, #add);
}
#section2{
height:200px;
background: linear-gradient(to bottom right, #de350b, #0065ff);
}
Есть несколько вещей, которые пришли мне в голову, но:
svg: не знаю, как обращаться с другим градиентом div.
border-radius: не удалось получить истинную S-подобную кривую, и она становится уродливой, когда я изменяю размер экрана.
clip-path: не поддерживается некоторыми браузерами https://caniuse.com/css-clip-path
png image: нет! должен быть динамический контент.
P.S: необходимо прочитать для будущего решения https://css-tricks.com/creating-non-rectangular-headers/