ThatGuyCND/css-diagonal-separators

Pure CSS Diagonal Separators

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:
  • see the layout.css for a detailed example

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

• Simple CSS
  • 🥇 Borders
  • 🥈 Gradient Background Image
  • 🥉 CSS Shapes
• Generated Content
  • 🥇 Borders
  • 🥈 Gradient Background Image
  • 🥉 SVG Background Image
• Cross Browser Support
  • 🥇 Borders
  • 🥈 SVG Background Image
  • 🥉 CSS Shapes
• Performance
  • 🥇 Gradient Background Image
  • 🥈 SVG Background Image
  • 🥉 Borders