Στην περίπτωση που επιθυμείτε να διαχωρίσετε ένα background στο elementor με διαχωριστή σχήματος (shape divider) προκειμένου να μετατρέψετε την εικόνα σας είτε πάνω είτε κάτω με κυματισμούς ή άλλα σχήματα και ταυτόχρονα θέλετε να εμφανίζεται η πίσω εικόνα background (εκεί που κάνει το κόψιμο δηλαδή), δυστυχώς δεν θα μπορέσετε με τον κλασικό διαχωριστή σχήματος του Elementor. Αυτό γιατί ο διαχωριστής σχήματος στο χώρισμα μπορεί μόνο να εμφανίσει χρώμμα (μέχρι και τις 31/1/2022).

Για να πετύχετε το αποτέλεσμα που ακολουθεί στην εικόνα θα χρειαστεί να χρησιμοποιήσετε τα μαγικά του css και πιο συγκεκριμένα το clip-path.

Οδηγίες Clip-path:

• Θα πρέπει πρώτα να επισκεφθείτε το clip-path waves generator: https://wave.novoselski.net
• Ρυθμίστε το offset , το amplitude και το frequency σύμφωνα με τα γούστα σας (το offset αφορά ουσιαστικά το ύψος της εικόνα)
• To generator από μόνο του φτιάχνει waves για το κάτω μέρος μιας εικόνας.
• Αν θέλετε το αποτέλεσμα να αντιστραφεί (δηλαδή τα κύματα να γίνουν στο πάνω μέρος της εικόνας), θα πρέπει να παραβιάσετε με το χέρι το τελικό αποτέλεσμα που σας δίνει ο generator καθώς δεν έχει την δυνατότητα για αντιστροφή (δείτε παρακάτω).

Κύματα κάτω από την εικόνα:

.kymatapanw{
clip-path: polygon(100% 0%, 0% 0% , 0% 81.00%, 1% 81.00%, 2% 81.02%, 3% 81.04%, 4% 81.07%, 5% 81.11%, 6% 81.16%, 7% 81.22%, 8% 81.29%, 9% 81.36%, 10% 81.45%, 11% 81.54%, 12% 81.64%, 13% 81.74%, 14% 81.86%, 15% 81.98%, 16% 82.11%, 17% 82.24%, 18% 82.38%, 19% 82.53%, 20% 82.68%, 21% 82.84%, 22% 83.00%, 23% 83.17%, 24% 83.34%, 25% 83.52%, 26% 83.69%, 27% 83.88%, 28% 84.06%, 29% 84.25%, 30% 84.43%, 31% 84.62%, 32% 84.81%, 33% 85.00%, 34% 85.19%, 35% 85.38%, 36% 85.57%, 37% 85.76%, 38% 85.95%, 39% 86.13%, 40% 86.31%, 41% 86.49%, 42% 86.66%, 43% 86.84%, 44% 87.00%, 45% 87.17%, 46% 87.32%, 47% 87.48%, 48% 87.62%, 49% 87.76%, 50% 87.90%, 51% 88.03%, 52% 88.15%, 53% 88.26%, 54% 88.37%, 55% 88.47%, 56% 88.56%, 57% 88.64%, 58% 88.72%, 59% 88.78%, 60% 88.84%, 61% 88.89%, 62% 88.93%, 63% 88.96%, 64% 88.98%, 65% 89.00%, 66% 89.00%, 67% 89.00%, 68% 88.98%, 69% 88.96%, 70% 88.93%, 71% 88.89%, 72% 88.84%, 73% 88.78%, 74% 88.71%, 75% 88.64%, 76% 88.55%, 77% 88.46%, 78% 88.36%, 79% 88.25%, 80% 88.14%, 81% 88.02%, 82% 87.89%, 83% 87.76%, 84% 87.61%, 85% 87.47%, 86% 87.31%, 87% 87.16%, 88% 86.99%, 89% 86.83%, 90% 86.66%, 91% 86.48%, 92% 86.30%, 93% 86.12%, 94% 85.94%, 95% 85.75%, 96% 85.56%, 97% 85.37%, 98% 85.18%, 99% 84.99%, 100% 84.80%);
}

Για να το αντιστρέψετε αλλάξτε το class σε κάτι πιο αναγνωρίσιμο, πηγαίνετε ξανά στο generator και χαμηλώστε κατά πολύ το offset , πάρτε το νέο αποτέλεσμα , σβήστε αυτά τα πρώτα "100% 0%, 0% 0% ," από πάνω και προσθέστε στο τέλος του polygon πριν το ")" τα ακόλουθα: ,100% 100%, 0% 100%

Δηλαδή ο κώδικας θα γίνει έτσι:

.kymatakatw{
clip-path: polygon(0% 19.5%, 1% 19.49%, 2% 19.48%, 3% 19.45%, 4% 19.42%, 5% 19.37%, 6% 19.32%, 7% 19.25%, 8% 19.18%, 9% 19.09%, 10% 19%, 11% 18.9%, 12% 18.79%, 13% 18.66%, 14% 18.54%, 15% 18.4%, 16% 18.26%, 17% 18.1%, 18% 17.95%, 19% 17.78%, 20% 17.61%, 21% 17.43%, 22% 17.25%, 23% 17.06%, 24% 16.87%, 25% 16.67%, 26% 16.47%, 27% 16.27%, 28% 16.06%, 29% 15.85%, 30% 15.64%, 31% 15.43%, 32% 15.21%, 33% 15%, 34% 14.78%, 35% 14.57%, 36% 14.36%, 37% 14.15%, 38% 13.94%, 39% 13.73%, 40% 13.52%, 41% 13.32%, 42% 13.13%, 43% 12.93%, 44% 12.75%, 45% 12.56%, 46% 12.39%, 47% 12.22%, 48% 12.05%, 49% 11.89%, 50% 11.74%, 51% 11.6%, 52% 11.46%, 53% 11.33%, 54% 11.21%, 55% 11.1%, 56% 11%, 57% 10.9%, 58% 10.82%, 59% 10.75%, 60% 10.68%, 61% 10.63%, 62% 10.58%, 63% 10.55%, 64% 10.52%, 65% 10.5%, 66% 10.5%, 67% 10.51%, 68% 10.52%, 69% 10.55%, 70% 10.58%, 71% 10.63%, 72% 10.68%, 73% 10.75%, 74% 10.82%, 75% 10.91%, 76% 11%, 77% 11.11%, 78% 11.22%, 79% 11.34%, 80% 11.47%, 81% 11.6%, 82% 11.75%, 83% 11.9%, 84% 12.06%, 85% 12.22%, 86% 12.4%, 87% 12.57%, 88% 12.76%, 89% 12.94%, 90% 13.14%, 91% 13.33%, 92% 13.54%, 93% 13.74%, 94% 13.95%, 95% 14.16%, 96% 14.37%, 97% 14.58%, 98% 14.79%, 99% 15.01%, 100% 15.22%,100% 100%, 0% 100%);
}

Τέλος αν θέλετε και άλλα σχήματα, μπορείτε να δείτε το ακόλουθο generator: https://bennettfeely.com/clippy/ και επίσης το ακόλουθο άρθρο: https://www.sitepoint.com/introducing-css-clip-path-property/

Καλή συνέχεια.

This post is also available in: English