data-shape

Section edge shapes and HR dividers using CSS shape() — wave, chevron, scallop, diagonal patterns with customizable depth.

Overview

The CSS shape() function enables responsive, CSS-native clip-path shapes using any CSS unit. Vanilla Breeze provides a shapes system that adds decorative edge clipping to sections and styled dividers to <hr> elements.

All shapes are guarded by @supports (clip-path: shape(...)) and degrade gracefully to rectangular elements in unsupported browsers. No SVG or JavaScript required.

The shapes system lives in the utils cascade layer, so any theme or component styles can override them.

Section Edges

Apply data-shape-start and data-shape-end to <section>, <article>, <header>, or <footer> to clip the top or bottom edge into a decorative shape.

Attribute Values Effect
data-shape-start wave, chevron, scallop, diagonal Clips the top edge of the element
data-shape-end wave, chevron, scallop, diagonal Clips the bottom edge of the element

Both attributes can be combined on a single element for different top and bottom shapes.

<!-- Bottom wave edge --> <section data-shape-end="wave"> <h2>Our Services</h2> <p>Content flows into a wave shape at the bottom.</p> </section> <!-- Top chevron + bottom scallop --> <section data-shape-start="chevron" data-shape-end="scallop"> <h2>Middle section</h2> <p>Chevron top, scallop bottom.</p> </section> <!-- Custom depth override --> <section data-shape-end="wave" class="subtle-edge"> <h2>Subtle wave</h2> </section> <style> .subtle-edge { --shape-depth: 5%; } </style>

Padding is automatically added on the clipped side to prevent content from being cut off.

HR Dividers

Class-based shape variants for <hr> elements. These extend the existing hr.decorative pattern.

Class Effect Requires shape()
hr.wave Sinusoidal wave line Yes
hr.zigzag Sharp zigzag line Yes
hr.scallop Repeating arcs Yes
hr.diamonds Connected diamond chain Yes
hr.dots Dot chain via radial-gradient No — works everywhere
<hr class="wave"> <hr class="zigzag"> <hr class="scallop"> <hr class="diamonds"> <hr class="dots">

All shape-based dividers fall back to a plain 1px <hr> in browsers without shape() support. The hr.dots variant uses radial-gradient and works in all browsers.

Custom Properties

The shapes system registers several @property declarations for animatable, type-safe customization.

Property Syntax Default Used By
--shape-depth <percentage> 15% Section edges — how dramatic the edge clip is
--shape-bevel <length> 20px Notched callouts — corner bevel size
--shape-curve <percentage> 50% Reserved for theme overrides
--shape-border <length> 4px Shaped borders — border thickness

These properties inherit and can be overridden at any level. Theme files (like cyber and kawaii) set their own defaults.

Demos

HR Dividers & Section Edges

Browser Support

The CSS shape() function is supported in all major browsers.

Feature Chrome Firefox Safari Edge
clip-path: shape() 135+ 148+ 18.4+ 135+
calc() inside shape() 135+ 148+ 18.4+ 135+
Custom properties in shape() 135+ 148+ 18.4+ 135+
Shape animation interpolation 135+ 148+ 18.4+ 135+

Older browsers see plain rectangles. The @supports guard prevents any broken rendering.