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 requireabsolute
or manual positioning:
- see the
layout.css
for a detailed example
Method | Simple CSS | Generated Content | Cross Browser Support | Performance |
---|---|---|---|---|
Borders | ||||
CSS Shapes | ||||
Gradient Background Image | ||||
SVG Background Image | ||||
SVG Mask | ||||
CSS3 2D Transforms |