Ticket #25696: onion_circles_pattern.html

File onion_circles_pattern.html, 2.5 KB (added by antonela, 13 months ago)
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>   
6#container {
7  background: #420C5D;
8  position: relative;
9  width: 100%;
10  padding-bottom: 100%;
11}
12.circle {
13  opacity: 0.2;
14  position: relative;
15  display: inline-block;
16  width: 100px;
17  height: 100px;
18  border-radius: 50%;
19}
20.inner {
21  position: absolute;
22} 
23.inner:nth-child(1){
24  transform: translate(calc(12.5% - 2px),calc(12.5% - 2px));
25  width: calc(100% * 0.75);
26  height: calc(100% * 0.75);
27  border-radius: 50%;
28}
29.inner:nth-child(2){
30  transform: translate(calc(40% - 2px),calc(40% - 2px));
31  width: calc(100% * 0.5);
32  height: calc(100% * 0.5);
33  border-radius: 50%;
34}
35.inner:nth-child(3){
36  transform: translate(calc(108% - 2px),calc(108% - 2px));
37  width: calc(100% * 0.25);
38  height: calc(100% * 0.25);
39  border-radius: 50%;
40}
41.solid {
42  background-color: #fff;
43}
44.border {
45  border: 4px solid #fff;
46}
47.dashed {
48  border: 4px dashed #fff;
49}
50.dotted {
51  border: 4px dotted #fff;
52}
53.bold {
54  border: 8px solid #fff;
55}
56.half {
57  width: 100px;
58  height: 50px;
59  border-radius: 50px 50px 0 0;
60}
61</style>
62</head>
63<body>
64
65<div id="container">
66 
67  <div class="circle solid"></div>
68 
69  <div class="circle border"></div>
70 
71  <div class="circle border">
72    <div class="inner border"></div>
73    <div class="inner border"></div>
74    <div class="inner border"></div> 
75  </div>
76 
77  <div class="circle">
78    <div class="half solid"></div>
79    <div class="half dotted"></div>
80  </div>
81 
82  <div class="circle dotted"></div>
83 
84  <div class="circle dotted">
85    <div class="inner dotted"></div>
86    <div class="inner dotted"></div>
87    <div class="inner dotted"></div> 
88  </div>
89 
90  <div class="circle dashed"></div>
91 
92  <div class="circle dashed">
93    <div class="inner dashed"></div>
94    <div class="inner dashed"></div>
95    <div class="inner dashed"></div>
96  </div>
97 
98  <div class="circle bold"></div>
99 
100  <div class="circle solid"></div>
101 
102  <div class="circle dotted">
103    <div class="inner dotted"></div>
104    <div class="inner dotted"></div>
105    <div class="inner dotted"></div> 
106  </div>
107 
108  <div class="circle border">
109    <div class="inner border"></div>
110    <div class="inner border"></div>
111    <div class="inner border"></div> 
112  </div>
113
114  <div class="circle">
115    <div class="half solid"></div>
116    <div class="half solid"></div>
117  </div>
118   
119 <div class="circle dashed">
120    <div class="inner dashed"></div>
121    <div class="inner dashed"></div>
122    <div class="inner dashed"></div>
123  </div>
124   
125</div>
126</body>
127</html>