Skip to content

Latest commit

 

History

History
48 lines (39 loc) · 2.34 KB

README.md

File metadata and controls

48 lines (39 loc) · 2.34 KB

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