{"id":9500,"date":"2022-01-31T13:44:39","date_gmt":"2022-01-31T11:44:39","guid":{"rendered":"https:\/\/maxservices.gr\/elementor-shape-separator-with-transparent-background-using-clip-path-css\/"},"modified":"2022-01-31T13:44:39","modified_gmt":"2022-01-31T11:44:39","slug":"elementor-shape-separator-with-transparent-background-using-clip-path-css","status":"publish","type":"post","link":"https:\/\/maxservices.gr\/en\/elementor-shape-separator-with-transparent-background-using-clip-path-css\/","title":{"rendered":"Elementor Shape separator with transparent background using clip-path css"},"content":{"rendered":"
In the case that you wish to separate a background in elementor with a shape divider in order to transform your image either up or down with waves or other shapes and at the same time you want the back background image to appear (where it makes the cut that is), unfortunately you won’t be able to do it with Elementor’s classic shape splitter. This is because the shape separator in the partition can only display color (until 1\/31\/2022).<\/p>\n
To achieve the result that follows in the image you will need to use the magic of css and more specifically the clip-path.<\/p>\n
<\/p>\n
Clip-path instructions:<\/p>\n
Waves below the image:<\/p>\n
\n\n.kymatapanw{\nclip-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%);\n}\n<\/pre>\nTo reverse this change the class to something more recognizable, go back to the generator and lower the offset a lot, get the new result, delete those first “100% 0%, 0% 0% ,<\/span>” above and add to the end of the polygon before “)” the following: ,100% 100%, 0% 100%<\/span><\/p>\n
That is, the code will become like this:<\/p>\n
\n\n.kymatakatw{\nclip-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%);\n}\n<\/pre>\n<\/p>\n
Finally, if you want other shapes, you can see the following generator: https:\/\/bennettfeely.com\/clippy\/<\/a> and also the following article: https:\/\/www.sitepoint.com\/introducing-css-clip-path-property\/<\/a><\/p>\n
Good luck.<\/p>\n
Original Source: https:\/\/nicolaslagios.com\/%ce%b4%ce%b9%ce%b1%cf%87%cf%89%cf%81%ce%b9%cf%83%cf%84%ce%ae%cf%82-%cf%83%cf%87%ce%ae%ce%bc%ce%b1%cf%84%ce%bf%cf%82-elementor-%ce%bc%ce%b5-%ce%b4%ce%b9%ce%ac%cf%86%ce%b1%ce%bd%ce%bf-background-%cf%87\/<\/p>\n","protected":false},"excerpt":{"rendered":"
In the case that you wish to separate a background in elementor with a shape divider in order to transform your image either up or <\/p>\n","protected":false},"author":1,"featured_media":8373,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[586,588,236,582,580,579],"tags":[589,587],"acf":[],"yoast_head":"\n
Elementor Shape separator with transparent background using clip-path css - Max Services<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n