GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ahmadnassri → Css Diagonal Separators

ahmadnassri / Css Diagonal Separators

Pure CSS Diagonal Separators

Labels

htmlcss

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].