Skip to content

Commit ca1e7ea

Browse files
author
Ahmad Nassri
committed
feat(new): initial commit
0 parents  commit ca1e7ea

25 files changed

+1682
-0
lines changed

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
end_of_line = lf
7+
indent_size = 2
8+
indent_style = space
9+
insert_final_newline = true
10+
trim_trailing_whitespace = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = true

‎README.md

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Pure CSS Diagonal Separators
2+
3+
### [Borders](borders)
4+
5+
> ```css
6+
> border-width: ...; border-color: ...;
7+
> ```
8+
9+
- ✔ Simple CSS
10+
- ✔ Generated Content
11+
- ✔ Cross Browser Support
12+
- ❓ Performance
13+
14+
### [CSS Shapes](shapes)
15+
16+
> ```css
17+
> clip-path: polygon(...)
18+
> ```
19+
20+
- ✖ Simple CSS
21+
- ✖ Generated Content
22+
- ✖ Cross Browser Support
23+
- ❓ Performance
24+
25+
### [Gradient Background Image](gradient)
26+
27+
> ```css
28+
> background-image: linear-gradient(...);
29+
> ```
30+
31+
- ✔ Simple CSS
32+
- ✔ Generated Content
33+
- ✖ Cross Browser Support
34+
- ❓ Performance
35+
36+
### [SVG Background Image](svg)
37+
38+
> ```css
39+
> background-image: url(data:image/svg+xml, ...);
40+
> ```
41+
42+
- ❓ Simple CSS
43+
- ✔ Generated Content
44+
- ✔ Cross Browser Support
45+
- ❓ Performance
46+
47+
### [SVG Mask](svg-mask)
48+
49+
> ```css
50+
> mask-image: url(data:image/svg+xml, ...);
51+
> ```
52+
53+
- ✖ Simple CSS
54+
- ✖ Generated Content
55+
- ✖ Cross Browser Support
56+
- ❓ Performance
57+
58+
### [CSS3 2D Transforms](transforms)
59+
60+
> ```css
61+
> transform: skewY(...);
62+
> ```
63+
64+
- ✖ Simple CSS
65+
- ✖ Generated Content
66+
- ✖ Cross Browser Support
67+
- ❓ Performance

‎borders/README.md

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Borders
2+
3+
## ✔ Simple CSS
4+
5+
```css
6+
:root {
7+
--width: 300px;
8+
--height: 100px;
9+
--top-color: #f44336;
10+
--bottom-color: #2196F3;
11+
}
12+
13+
.separator {
14+
width: 0;
15+
height: 0;
16+
border-style: solid;
17+
border-width: var(--height) var(--width) 0 0;
18+
border-color: var(--top-color) var(--bottom-color) transparent transparent;
19+
}
20+
```
21+
22+
###### Reversed
23+
24+
```css
25+
.separator.reverse {
26+
border-width: var(--height) 0 0 var(--width);
27+
border-color: var(--top-color) transparent transparent var(--bottom-color);
28+
}
29+
```
30+
31+
###### Vertical
32+
33+
```css
34+
.separator.vertical {
35+
border-width: var(--height) var(--width) 0 0;
36+
border-color: var(--left-color) var(--right-color) transparent transparent;
37+
}
38+
```
39+
40+
###### Reversed Vertical
41+
42+
```css
43+
.separator.vertical.reverse {
44+
border-width: 0 var(--width) var(--height) 0;
45+
border-color: transparent var(--left-color) var(--right-color) transparent;
46+
}
47+
```
48+
49+
- 👎 Cannot be used with percentage measurement unit _(`%`)_, any other unit is valid: _(`cm`, `em`, `ex`, `in`, `mm`, `pc`, `pt`, `px`)_
50+
- 👎 For use in a full width or height scenarios matching the viewport, use viewport units: _(`vw`, `vh`, `vmin`)_
51+
- 👎 Further control is limited
52+
- example: creating a shadow effect using `box-shadow`
53+
- 👍 The angle is controlled by the element height value
54+
- 👋 The example above uses [CSS Variables][css-vars] for demonstration purposes, adjust for your own use
55+
- _css variables are [not fully supported yet][css-vars-compat]._
56+
- 👋 `reversed` & `vertical` variants listed above are verbose for demonstration purposes
57+
- for simple multi directional classes, use the [`rotate()`][css-transform-rotate] function as needed
58+
- _see [`style.css`](style.css) for an example_
59+
- 👌 Use with `transparent` colors _(e.g. to overlay an image, or content)_ will require `absolute` or manual positioning:
60+
- _see [`layout.css`](../layout.css) for an example_
61+
62+
## ✔ Generated Content
63+
64+
Can be used with the `::before` and `::after` pseudo-elements to generate HTML content for the separator without directly modifying your DOM.
65+
66+
###### Example
67+
68+
```css
69+
section {
70+
...
71+
}
72+
73+
section::after {
74+
content: '';
75+
display: block;
76+
width: 0;
77+
height: 0;
78+
border-style: solid;
79+
border-width: 50px 300px 0 0;
80+
border-color: yellow black transparent transparent;
81+
}
82+
```
83+
84+
## ✔ Cross Browser Support
85+
86+
[Supported on all browsers](http://caniuse.com/#search=border-color)
87+
88+
## ❓ Performance
89+
90+
> **TODO**
91+
92+
## Demo
93+
94+
View [Demo][demo], Play on [CodePen][pen], or inspect the [source files](index.html).
95+
96+
[demo]: https://raw.githack.com/ahmadnassri/css-diagonal-separators/master/borders/index.html
97+
[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
98+
[css-vars-compat]: http://caniuse.com/#search=variables
99+
[css-transform-rotate]: https://www.w3.org/TR/css-transforms-1/#funcdef-rotate
100+
[pen]: http://codepen.io/ahmadnassri/pen/eBabKo

‎borders/index.html

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="UTF-8"/>
6+
<title>Diagonal Separator [Borders]</title>
7+
8+
<link rel="stylesheet" href="style.css"/>
9+
<link rel="stylesheet" href="../layout.css"/>
10+
</head>
11+
12+
<body>
13+
<h1>Diagonal Separator [Borders]</h1>
14+
15+
<div class="demo plain">
16+
<section>
17+
<header></header>
18+
<div class="separator"></div>
19+
<footer></footer>
20+
</section>
21+
22+
<section>
23+
<header></header>
24+
<div class="separator reverse"></div>
25+
<footer></footer>
26+
</section>
27+
</div>
28+
29+
<div class="demo plain">
30+
<section class="vertical">
31+
<header></header>
32+
<div class="separator"></div>
33+
<footer></footer>
34+
</section>
35+
36+
<section class="vertical">
37+
<header></header>
38+
<div class="separator reverse"></div>
39+
<footer></footer>
40+
</section>
41+
</div>
42+
43+
<div class="demo image above">
44+
<section>
45+
<header></header>
46+
<div class="separator"></div>
47+
<footer></footer>
48+
</section>
49+
50+
<section>
51+
<header></header>
52+
<div class="separator reverse"></div>
53+
<footer></footer>
54+
</section>
55+
</div>
56+
57+
<div class="demo image above">
58+
<section class="vertical">
59+
<header></header>
60+
<div class="separator"></div>
61+
<footer></footer>
62+
</section>
63+
64+
<section class="vertical">
65+
<header></header>
66+
<div class="separator reverse"></div>
67+
<footer></footer>
68+
</section>
69+
</div>
70+
71+
<div class="demo image below">
72+
<section>
73+
<header></header>
74+
<div class="separator"></div>
75+
<footer></footer>
76+
</section>
77+
78+
<section>
79+
<header></header>
80+
<div class="separator reverse"></div>
81+
<footer></footer>
82+
</section>
83+
</div>
84+
85+
<div class="demo image below">
86+
<section class="vertical">
87+
<header></header>
88+
<div class="separator"></div>
89+
<footer></footer>
90+
</section>
91+
92+
<section class="vertical">
93+
<header></header>
94+
<div class="separator reverse"></div>
95+
<footer></footer>
96+
</section>
97+
</div>
98+
</body>
99+
</html>

‎borders/style.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
:root {
2+
--width: 300px;
3+
--height: 100px;
4+
--top-color: #f44336;
5+
--bottom-color: #2196F3;
6+
}
7+
8+
.separator {
9+
width: 0;
10+
height: 0;
11+
border-style: solid;
12+
border-width: var(--height) var(--width) 0 0;
13+
border-color: var(--top-color) var(--bottom-color) transparent transparent;
14+
}
15+
16+
.separator.reverse {
17+
transform: rotateY(180deg);
18+
}
19+
20+
.vertical .separator.reverse {
21+
transform: rotateX(180deg);
22+
}

‎gradient/README.md

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Gradient Background Image
2+
3+
## ✔ Simple CSS
4+
5+
```css
6+
:root {
7+
--width: 100%;
8+
--height: 100px;
9+
--top-color: #f44336;
10+
--bottom-color: #2196F3;
11+
}
12+
13+
.separator {
14+
width: var(--width);
15+
height: var(--height);
16+
background-image: linear-gradient(to bottom right, var(--top-color), var(--top-color) 50%, var(--bottom-color) 50%, var(--bottom-color));
17+
}
18+
```
19+
20+
###### Reversed
21+
22+
```css
23+
.separator.reverse {
24+
background-image: linear-gradient(to bottom left, var(--top-color), var(--top-color) 50%, var(--bottom-color) 50%, var(--bottom-color));
25+
}
26+
```
27+
28+
###### Reversed Vertical
29+
30+
```css
31+
.separator.vertical.reverse {
32+
background-image: linear-gradient(to top right, var(--top-color), var(--top-color) 50%, var(--bottom-color) 50%, var(--bottom-color));
33+
}
34+
```
35+
36+
- 👎 Jagged / blurry edges on some rendering engines
37+
- tweak the percentage a little to get a better rounding algorithm.
38+
- 👎 Further control is limited
39+
- example: creating a shadow effect using `box-shadow`
40+
- 👍 The angle is controlled by the element height value
41+
- 👋 The example above uses [CSS Variables][css-vars] for demonstration purposes, adjust for your own use
42+
- _css variables are [not fully supported yet][css-vars-compat]._
43+
- 👋 `reversed` & `vertical` variants listed above are verbose for demonstration purposes
44+
- for simple multi directional classes, use the [`rotate()`][css-transform-rotate] function as needed
45+
- _see [`style.css`](style.css) for an example_
46+
- 👌 Use with `transparent` colors _(e.g. to overlay an image, or content)_ will require `absolute` or manual positioning:
47+
- _see [`layout.css`](../layout.css) for an example_
48+
49+
## ✔ Generated Content
50+
51+
Can be used with the `::before` and `::after` pseudo-elements to generate HTML content for the separator without directly modifying your DOM.
52+
53+
###### Example
54+
55+
```css
56+
section {
57+
...
58+
}
59+
60+
section::after {
61+
width: 100%;
62+
height: 50px;
63+
background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
64+
}
65+
```
66+
67+
## ✖ Cross Browser Support
68+
69+
[Partial support](http://caniuse.com/#feat=css-gradients)
70+
71+
> Supported in all major browsers, with the exception of `Opera Mini`.
72+
73+
## ❓ Performance
74+
75+
> **TODO**
76+
77+
## Demo
78+
79+
View [Demo][demo], Play on [CodePen][pen], or inspect the [source files](index.html).
80+
81+
[demo]: https://raw.githack.com/ahmadnassri/css-diagonal-separators/master/gradients/index.html
82+
[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
83+
[css-vars-compat]: http://caniuse.com/#search=variables
84+
[css-transform-rotate]: https://www.w3.org/TR/css-transforms-1/#funcdef-rotate
85+
[pen]: http://codepen.io/ahmadnassri/pen/aBrPKb

0 commit comments

Comments
 (0)