|
5 | 5 | <meta name="viewport" content="width=device-width" /> |
6 | 6 | <title>Generated content</title> |
7 | 7 | <style> |
| 8 | + body, div { |
| 9 | + background-repeat: no-repeat; |
| 10 | + } |
8 | 11 | body { |
9 | | - background-image: linear-gradient(#3a67ab, #e8f6ff 100%); |
10 | | - height: 100vh; |
11 | | - width: 100vw; |
| 12 | + background-image: linear-gradient(#3a67ab, #e8f6ff 100%); |
12 | 13 | } |
13 | | - |
14 | 14 | div { |
15 | | - position: absolute; |
16 | | - right: 0; |
17 | | - bottom: 0; |
| 15 | + position: relative; |
18 | 16 | width: 400px; |
19 | 17 | height: 400px; |
20 | | - background-image: linear-gradient( |
21 | | - 115deg, |
22 | | - transparent 48%, |
23 | | - brown, |
24 | | - #996600, |
25 | | - brown, |
26 | | - transparent 52% |
27 | | - ), |
28 | | - linear-gradient( |
29 | | - 60deg, |
30 | | - transparent 48%, |
31 | | - brown, |
32 | | - #996600, |
33 | | - brown, |
34 | | - transparent 52% |
35 | | - ), |
36 | | - radial-gradient( |
37 | | - circle 10px at 50% 50%, |
38 | | - #333333 30%, |
39 | | - #999999 50%, |
40 | | - transparent 50% |
41 | | - ), |
42 | | - radial-gradient( |
43 | | - circle 10px at 50% 50%, |
44 | | - #333333 30%, |
45 | | - #999999 50%, |
46 | | - transparent 50% |
47 | | - ), |
48 | | - radial-gradient( |
49 | | - circle at 50% 50%, |
50 | | - white 30%, |
51 | | - #eeeeee 50%, |
52 | | - transparent 50% |
53 | | - ), |
54 | | - radial-gradient( |
55 | | - circle at 50% 50%, |
56 | | - white 30%, |
57 | | - #eeeeee 50%, |
58 | | - transparent 50% |
59 | | - ), |
60 | | - radial-gradient( |
61 | | - circle at 50% 50%, |
62 | | - white 30%, |
63 | | - #eeeeee 50%, |
64 | | - transparent 50% |
65 | | - ); |
66 | | - background-repeat: no-repeat; |
67 | | - background-size: |
68 | | - 100px 100px, |
69 | | - 100px 100px, |
70 | | - 15px 15px, |
71 | | - 15px 15px, |
72 | | - 200px 200px, |
73 | | - 300px 300px, |
74 | | - 400px 400px; |
75 | | - background-position: |
76 | | - 95% 120px, |
77 | | - 5% 120px, |
78 | | - 46% 80px, |
79 | | - 54% 80px, |
80 | | - 50% 0, |
81 | | - 50% 90px, |
82 | | - 50% 220px; |
| 18 | + background-image: |
| 19 | + linear-gradient(115deg, transparent 48%, brown, #996600, brown, transparent 52%), |
| 20 | + linear-gradient(60deg, transparent 48%, brown, #996600, brown, transparent 52%), |
| 21 | + radial-gradient(circle 10px at 50% 50%, #333333 30%, #999999 50%, transparent 50%), |
| 22 | + radial-gradient(circle 10px at 50% 50%, #333333 30%, #999999 50%, transparent 50%), |
| 23 | + radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%), |
| 24 | + radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%), |
| 25 | + radial-gradient(circle at 50% 50%, white 30%, #eeeeee 50%, transparent 50%); |
| 26 | + background-size: |
| 27 | + 100px 100px, 100px 100px, |
| 28 | + 15px 15px, 15px 15px, |
| 29 | + 200px 200px, 300px 300px, 400px 400px; |
| 30 | + background-position: |
| 31 | + 95% 120px, 5% 120px, |
| 32 | + 46% 80px, 54% 80px, |
| 33 | + 50% 0, 50% 90px, 50% 220px; |
83 | 34 | } |
84 | | - |
85 | 35 | div::after { |
86 | 36 | content: ""; |
87 | 37 | border: transparent solid 4px; |
|
0 commit comments