Design transition from slide show to color selection?

your idea – to use the following color-section with top svg divider is the right one.
There are twp things to keep in mind:
– the z-index had to be bigger ( this could be done in the alb settings on divider ( keep in front )
– transform-origin default value is : center center
so if you only rotate or mirror the svg – it stayes in the same position : but if you set the transform-origin to top center – it will have the desired effect.

also remember to take the Divider Color equal to the background-color of that color section.

but to use it whereever you like to have it – it is best to give to the following color-section a custom class – f.e.: outwards-top-divider
i prefer the scale transformation – but rotate(180deg) is also possible:

.avia-section.outwards-top-divider .avia-divider-svg-top {
  transform: scaleY(-1);
  -webkit-transform-origin: center top;
  transform-origin: center top;
  z-index: 100;  /*** if you set it in the alb - you don't need this rule here ***/
}

see: https://enfold.webers-webdesign.de/martin/

PS: i transform here the surrounding container of the svg – the reason is not to overwrite the transforms of the svg itself.

Do not forget the custom class to set and :

Ein ID wird hier garnicht benötigt – dieses outwards-top-divider ist eine Klasse, damit du das auch auf einer Seite mehrmals nutzen kannst muss das so sein. Diese Klasse geht an die color-section selber:
( bei Color-Section zu Color-Section macht das Überlappen zu der anderen Sektion keinen Sinn, aber falls nochmal ein Slider oder z.B. eine Grid-Row so sein soll …

Wenn du bei den svg-dividern dann wählst:

ist der z-index automatisch auf 100 gesetzt.
Da du jetzt ja einen Übergang von dem Slider zu einer weißen Color-section haben möchtest, wählst du bei Divider Color auch weiß.

Das sind custom made svgs. Schau dir die svgs von Enfold mal mit einem Guten Texteditor an ( OSX: Sublime Text oder Windows: notepad++ )
Der Aufbau ist recht ähnlich – ein wenig was über svgs sollte man wissen.

PS : das svg liegt ja im DOM als inline svg file explizit vor. Niemand hindert dich das svg aus dem DOM herauszukopieren ;)
Anleitungen wie man custom svgs einbindet gibt es nicht nur von mir hier an Board genüge :)

PPS: was überigens bei den meisten svg dividern der Fall ist – so auch bei Elementor und Konsorten.

schau mal die Stadt-Silhouette: https://guenterweber.com/#footer

Developer Tools des Browsers öffnen – zu dem svg navigieren – rechte Maustaste – äußeres html kopieren:

and: https://kriesi.at/documentation/enfold/columns/#adding-custom-svg-dividers

Meine Empfehlung nun – hochladen der custom svg files in einen uploads unterordner: avia_custom_shapes
für die Option “has flip” benötigst du dann allerdings zwei files – wobei die Nomenklatur dann des Flip Files festliegt ( hat als addendum : -negative )
(transparenz und Füllung wechseln hier )