Shape Dividers

Shape Dividers

Shape dividers place a decorative SVG shape at the top or bottom edge of a section, creating waves, slants, mountains, clouds, and other transitions between coloured bands. Add a .shape-divider element with a data-shape attribute and Canvas injects the matching SVG and scoped CSS automatically.

Key Attributes

• data-shape: the shape name. Default: valley.
• data-position: top (default) or bottom. Determines which edge the divider sits on.
• data-height: shape height in pixels. Default: 100.
• data-width: shape width as a percentage. Default: 100. Values below 100 are clamped up to 100.
• data-fill: fill colour for the shape (any CSS colour). If omitted, the shape inherits the fill from CSS.
• data-outside: true or false (default false). When true, the divider is offset outside the section edge rather than overlapping it.

Basic Example

A wave at the bottom of a section:

<section class="page-title" style="position: relative;">
    <div class="container">
        <h1>Page Title</h1>
    </div>
    <div class="shape-divider" data-shape="wave" data-position="bottom" data-height="120"></div>
</section>

Top and Bottom Pair

Frame a section with a divider on both edges:

<div class="section" style="position: relative;">
    <div class="shape-divider" data-shape="valley-2" data-height="120"></div>
    <div class="container">
        <h2>Content</h2>
    </div>
    <div class="shape-divider" data-shape="valley-2" data-position="bottom" data-height="120"></div>
</div>

Custom Fill Colour

<div class="shape-divider" data-shape="mountain" data-position="bottom"
     data-height="150" data-fill="#f5f5f5"></div>

Available Shapes

Valleys: valley, valley-2, valley-3.
Mountains: mountain, mountain-2, mountain-3, mountain-4, mountain-5, mountains, mountains-2, mountains-3, mountains-4.
Plateaus: plataeu, plataeu-2.
Hills: hills, hills-2, hills-3, hills-4.
Clouds: cloud, cloud-2, cloud-3.
Waves: wave, wave-2, wave-3, wave-4, wave-5, wave-6.
Slants: slant, slant-2, slant-3.
Rounded: rounded, rounded-2, rounded-3, rounded-4, rounded-5.
Others: triangle, drops, cliff, zigzag, illusion.

How It Works

The plugin reads your attributes, generates a unique id for the divider, injects scoped <style> for width, height, and fill, then sets the SVG markup as the element's inner HTML. The SVG paths carry a .shape-divider-fill class so the fill colour applies to every layer. Once processed, the element gets a shape-divider-complete class so it is not re-rendered.

Tips

• The parent section must be position: relative so the absolutely positioned divider anchors to it.
• Layered shapes (like mountains, wave-4, rounded-4) use multiple paths at different opacities for a depth effect. Set data-fill and all layers inherit it.
• Match the divider fill to the next section's background so the transition reads as one continuous edge.