Pure CSS Diagonal Separators
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
borders
gradient
shapes
svg-mask
svg
transforms
.editorconfig
README.md

README.md

Pure CSS Diagonal Separators

Read The full post on Code Pen

Notes:

  • CSS Variables are used for demonstration purposes and future prosperity, they are yet to be supported across all browsers and rendering engines!
  • reversed & vertical variants listed below are verbose for demonstration purposes
    • for simple multi directional variants, use the rotate() function as needed
    • see the style.css of each method for a detailed example
  • Use with transparent colors (e.g. to overlay an image, or content) will require absolute or manual positioning:

Comparision Matrix

Method Simple CSS Generated Content Cross Browser Support Performance
Borders
CSS Shapes
Gradient Background Image
SVG Background Image
SVG Mask
CSS3 2D Transforms

Results