Skip to content

dosstx/css-diagonal-separators

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Releases

No releases published

Packages

No packages published

Languages

  • HTML 66.4%
  • CSS 33.6%