Wave Edge at the Bottom of Sections
Gives any Group or Cover block with the class "wpide-wave-bottom" a soft wavy bottom edge instead of a straight line, for friendlier section transitions.
Opens WPIDE on
Code
.wpide-wave-bottom {
--wpide-wave-height: 48px;
padding-bottom: calc(var(--wpide-wave-height) + 1rem) !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v30c-150 30-300 30-450 0S450 0 300 30 75 60 0 30z'/%3E%3C/svg%3E") bottom / 100% var(--wpide-wave-height) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--wpide-wave-height) + 1px) no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v30c-150 30-300 30-450 0S450 0 300 30 75 60 0 30z'/%3E%3C/svg%3E") bottom / 100% var(--wpide-wave-height) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--wpide-wave-height) + 1px) no-repeat;
}Notes
The wave is cut out of the block itself, so the next section's background shows through. Increase --wpide-wave-height for a taller wave.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.