https://github.com/ahmadnassri/css-diagonal-separators
Pure CSS Diagonal Separators
https://github.com/ahmadnassri/css-diagonal-separators
css
Last synced: about 1 year ago
JSON representation
Pure CSS Diagonal Separators
- Host: GitHub
- URL: https://github.com/ahmadnassri/css-diagonal-separators
- Owner: ahmadnassri
- Created: 2016-12-26T18:01:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-23T21:18:06.000Z (over 9 years ago)
- Last Synced: 2025-04-30T10:23:09.116Z (about 1 year ago)
- Topics: css
- Language: HTML
- Homepage: https://ahmadnassri.com/blog/non-rectangular-headers/
- Size: 451 KB
- Stars: 58
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pure CSS Diagonal Separators
Read The full [post on Code Pen](https://codepen.io/ahmadnassri/post/non-rectangular-headers-part-1)
> **Notes**:
>
> - [CSS Variables][css-vars] are used for demonstration purposes and future prosperity, they are yet to be [supported][css-vars-compat] across all browsers and rendering engines!
> - `reversed` & `vertical` variants listed below are verbose for demonstration purposes
> - for simple multi directional variants, use the [`rotate()`][css-transform-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`](assets/layout.css) for a detailed example_
#### Comparision Matrix
Method | Simple CSS | Generated Content | Cross Browser Support | Performance
------------------------------------- | ---------- | ----------------- | --------------------- | -----------
[Borders](borders) | ✔ | ✔ | ✔ | ✖
[CSS Shapes](shapes) | ✖ | ✖ | ✖ | ✖
[Gradient Background Image](gradient) | ✔ | ✔ | ✖ | ✔
[SVG Background Image](svg) | ❓ | ✔ | ✔ | ✔
[SVG Mask](svg-mask) | ✖ | ✖ | ✖ | ✖
[CSS3 2D Transforms](transforms) | ✖ | ✖ | ✖ | ✖
#### Results
- Simple CSS
- 🥇 [Borders](borders)
- 🥈 [Gradient Background Image](gradient)
- 🥉 [CSS Shapes](shapes)
- Generated Content
- 🥇 [Borders](borders)
- 🥈 [Gradient Background Image](gradient)
- 🥉 [SVG Background Image](svg)
- Cross Browser Support
- 🥇 [Borders](borders)
- 🥈 [SVG Background Image](svg)
- 🥉 [CSS Shapes](shapes)
- Performance
- 🥇 [Gradient Background Image](gradient)
- 🥈 [SVG Background Image](svg)
- 🥉 [Borders](borders)
[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
[css-vars-compat]: http://caniuse.com/#search=variables
[css-transform-rotate]: https://www.w3.org/TR/css-transforms-1/#funcdef-rotate