1 <!doctype html>
2 <html>
3 <head>
4 <title></title>
5 <meta charset='utf-8'>
6 <style type="text/css">
7 :root,body{
8 height: 100%;
9 width: 100%;
10 }
11 .z{
12 width:200px;
13 height: 400px;
14 left: 400px;
15 position: absolute;
16 }
17 .z div{
18 position: absolute;
19
20 }
21 .z .red{
22 background-color: red;
23 box-shadow: 0px 0px 1px 0 #666;
24 }
25 .f1{
26 width: 18px;
27 height: 18px;
28 -webkit-transform: rotate(45deg);
29 -moz-transform: rotate(45deg);
30 -ms-transform: rotate(45deg);
31 -o-transform: rotate(45deg);
32 transform: rotate(45deg);
33 top:0;
34 border-radius: 2px;
35 }
36 .l1,.l2,.l3,.l4{
37 width:2px;
38 height: 10px;
39 }
40 .c1{
41 width:14px;
42 height: 14px;
43 border-radius: 7px;
44 box-shadow: 0px 0px 1px 0 #666;
45 z-index: 10;
46 }
47 .c1-1 {
48 position: relative;
49 width: 40px;
50 height: 12px;
51 }
52 .c1-1:before,
53 .c1-1:after {
54 box-shadow: 0px 0px 1px 0 #666;
55 content: "";
56 position: absolute;
57 top: 0;
58 left: 0;
59 width: 8px;
60 height: 14px;
61 border: 2px solid red;
62 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
63 -webkit-transform: rotate(-90deg);
64 -moz-transform: rotate(-90deg);
65 -ms-transform: rotate(-90deg);
66 -o-transform: rotate(-90deg);
67 transform: rotate(-90deg);
68 }
69
70 .c1-1:after {
71 left: auto;
72 right: 0;
73 border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
74 -webkit-transform: rotate(-90deg);
75 -moz-transform: rotate(-90deg);
76 -ms-transform: rotate(-90deg);
77 -o-transform: rotate(-90deg);
78 transform: rotate(-90deg);
79 }
80 .r{
81 width:80px;
82 height: 80px;
83 z-index: 10;
84 -webkit-transform: rotate(45deg);
85 -moz-transform: rotate(45deg);
86 -ms-transform: rotate(45deg);
87 -o-transform: rotate(45deg);
88 transform: rotate(45deg);
89 }
90 .r .ro{
91 position: relative;
92 display: table;
93 border-collapse:separate;
94 border-spacing: 1px;
95 }
96 .r .b{
97 width:15px;
98 height: 14px;
99 position: relative;
100 display: table-cell;
101 border-radius: 2px;
102 }
103 .c2{
104 width:10px;
105 height: 10px;
106 border-radius: 5px;
107 }
108 .c3{
109 width:10px;
110 height: 10px;
111 border-radius: 5px 5px 0 0;
112 }
113 .c4{
114 width:14px;
115 height: 14px;
116 border-radius: 8px;
117 z-index: 10;
118 }
119 .k{
120 width: 10px;
121 height: 12px;
122 }
123 .k1{
124 width: 14px;
125 height: 6px;
126 }
127 .s{
128 height: 150px;
129 display: table;
130 border-collapse:separate;
131 border-spacing: 1px;
132 }
133 .ss{
134 width: 1px;
135 height: 100%;
136 position: relative !important;
137 display: table-cell;
138 }
139 .i1 {
140 position: relative;
141 width: 162px;
142 height: 46px;
143 }
144
145 .i1:before,
146 .i1:after {
147 box-shadow: 0px 0px 1px 0 #666;
148 content: "";
149 position: absolute;
150 top: 0;
151 left: 0;
152 width: 30px;
153 height: 40px;
154 border: 3px solid red;
155 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
156 -webkit-transform: rotate(-90deg);
157 -moz-transform: rotate(-90deg);
158 -ms-transform: rotate(-90deg);
159 -o-transform: rotate(-90deg);
160 transform: rotate(-90deg);
161 }
162
163 .i1:after,.i2:after {
164 left: auto;
165 right: 0;
166 border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
167 -webkit-transform: rotate(-90deg);
168 -moz-transform: rotate(-90deg);
169 -ms-transform: rotate(-90deg);
170 -o-transform: rotate(-90deg);
171 transform: rotate(-90deg);
172 }
173 .i2 {
174 position: relative;
175 width: 136px;
176 height: 24px;
177 }
178 .i2:before,
179 .i2:after {
180 box-shadow: 0px 0px 1px 0 #666;
181 content: "";
182 position: absolute;
183 top: 0;
184 left: 0;
185 width: 12px;
186 height: 20px;
187 border: 2px solid red;
188 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
189 -webkit-transform: rotate(-90deg);
190 -moz-transform: rotate(-90deg);
191 -ms-transform: rotate(-90deg);
192 -o-transform: rotate(-90deg);
193 transform: rotate(-90deg);
194 }
195
196 .i2:after {
197 left: auto;
198 right: 0;
199 border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
200 -webkit-transform: rotate(-90deg);
201 -moz-transform: rotate(-90deg);
202 -ms-transform: rotate(-90deg);
203 -o-transform: rotate(-90deg);
204 transform: rotate(-90deg);
205 }
206 .e1 {
207 position: relative;
208 width: 12px;
209 height: 24px;
210 }
211 .e1:before,
212 .e1:after {
213 box-shadow: 0px 0px 1px 0 #666;
214 content: "";
215 position: absolute;
216 top: 0;
217 left: 0;
218 width: 12px;
219 height: 20px;
220 border: 2px solid red;
221 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
222 -webkit-transform: rotate(-90deg);
223 -moz-transform: rotate(-90deg);
224 -ms-transform: rotate(-90deg);
225 -o-transform: rotate(-90deg);
226 transform: rotate(-90deg);
227 }
228 .m{
229 width:80px;
230 height: 80px;
231 -webkit-transform: rotate(45deg);
232 -moz-transform: rotate(45deg);
233 -ms-transform: rotate(45deg);
234 -o-transform: rotate(45deg);
235 transform: rotate(45deg);
236
237 }
238 .n{
239 width:80px;
240 height: 80px;
241 -webkit-transform: rotate(-45deg);
242 -moz-transform: rotate(-45deg);
243 -ms-transform: rotate(-45deg);
244 -o-transform: rotate(-45deg);
245 transform: rotate(-45deg);
246
247 }
248 .m .rx,.n .rx{
249 position: relative;
250 display: table;
251 border-collapse:separate;
252 border-spacing: 1px;
253 }
254 .m .rb , .m .rb-space,.n .rb , .n .rb-space{
255 position: relative;
256 width: 120px;
257 height: 14px;
258 display: table-cell;
259 }
260
261 .m .rb:before,
262 .m .rb:after,.n .rb:before,
263 .n .rb:after {
264 box-shadow: 0px 0px 1px 0 #666;
265 content: "";
266 position: absolute;
267 top: 0;
268 left: -8px;
269 width: 6px;
270 height: 10px;
271 border: 2px solid red;
272 border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;
273 -webkit-transform: rotate(-90deg);
274 -moz-transform: rotate(-90deg);
275 -ms-transform: rotate(-90deg);
276 -o-transform: rotate(-90deg);
277 transform: rotate(-90deg);
278 }
279
280 .m .rb:after,.n .rb:after{
281 left: auto;
282 right: -8px;
283 border-radius:50% 50% 50% 50% / 60% 60% 60% 60%;
284 -webkit-transform: rotate(-90deg);
285 -moz-transform: rotate(-90deg);
286 -ms-transform: rotate(-90deg);
287 -o-transform: rotate(-90deg);
288 transform: rotate(-90deg);
289 }
290 </style>
291 <script type="text/javascript" src='../bower_components/jquery/dist/jquery.js'></script>
292 <script type="text/javascript">
293 $(document).ready(function(){
294 var $z = $('.z'), $f1 = $('.f1') , $l1 = $('.l1') , $c1 = $('.c1') , $l2 = $('.l2') , $r = $('.r') , $l3 = $('.l3') , $c2 = $('.c2') , $l4 = $('.l4') , $c3 = $('.c3') , $c4 = $('.c4'),
295 $k = $('.k') , $k1 = $('.k1') , $s = $('.s') , $i1 = $('.i1') , $i2 = $('.i2'),
296 $e1 = $('.e1') , $c1_1 = $('.c1-1'),
297 $m = $('.m') , $n = $('.n');
298 $f1.css({
299 left : ($z.width() - $f1.width()) / 2 ,
300 top : Math.sqrt(2 * Math.pow($f1.height() / 2 , 2)) - $f1.height() / 2
301 });
302 $l1.css({
303 left : ($z.width() - $l1.width()) / 2,
304 top : Math.sqrt(2 * Math.pow($f1.height() , 2))
305 });
306 $c1.css({
307 left : ($z.width() - $c1.width()) / 2,
308 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height()
309 });
310 $l2.css({
311 left : ($z.width() - $l2.width()) / 2,
312 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height()
313 });
314 $r.css({
315 left : ($z.width() - $r.width()) / 2,
316 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() / 2 , 2)) - $r.height() / 2
317 });
318 $l3.css({
319 left : ($z.width() - $l3.width()) / 2,
320 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2))
321 });
322 $c2.css({
323 left : ($z.width() - $c2.width()) / 2,
324 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height()
325 });
326 $l4.css({
327 left : ($z.width() - $l4.width()) / 2,
328 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height()
329 });
330 $c3.css({
331 left : ($z.width() - $c3.width()) / 2,
332 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height()
333 });
334 $c4.css({
335 left : ($z.width() - $c4.width()) / 2,
336 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4
337 });
338 $k.css({
339 left : ($z.width() - $k.width()) / 2,
340 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4
341 });
342 $k1.css({
343 left : ($z.width() - $k1.width()) / 2,
344 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4 + $k.height()
345 });
346 $s.css({
347 left : ($z.width() - $k1.width()) / 2,
348 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) + $l3.height() + $c2.height() + $l4.height() + $c3.height() - 4 + $c4.height() - 4 + $k.height() + $k1.height()
349 });
350
351 $i1.css({
352 left : ($z.width() - $i1.width()) / 2,
353 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) / 2 - $i1.height() / 2
354 });
355 $i2.css({
356 left : ($z.width() - $i2.width()) / 2,
357 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($r.height() , 2)) / 2 - $i2.height() / 2
358 });
359 $c1_1.css({
360 left : ($z.width() - $c1_1.width()) / 2,
361 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + ($c1_1.height() - $c1.height()) / 2
362 });
363 $m.css({
364 left : ($z.width() - $m.width()) / 2,
365 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($m.height() / 2 , 2)) - $m.height() / 2
366 });
367 $n.css({
368 left : ($z.width() - $n.width()) / 2,
369 top : Math.sqrt(2 * Math.pow($f1.height() , 2)) + $l1.height() + $c1.height() + $l2.height() + Math.sqrt(2 * Math.pow($n.height() / 2 , 2)) - $n.height() / 2
370 });
371 });
372 </script>
373 </head>
374 <body>
375 <div class='z'>
376 <div class='f1 red'></div>
377 <div class='l1 red'></div>
378 <div class='c1 red'></div>
379 <div class='c1-1'></div>
380 <div class='l2 red'></div>
381 <div class='r'>
382 <div class='ro'>
383 <div class='b red'></div>
384 <div class='b red'></div>
385 <div class='b red'></div>
386 <div class='b red'></div>
387 <div class='b red'></div>
388 </div>
389 <div class='ro'>
390 <div class='b red'></div>
391 <div class='b red'></div>
392 <div class='b red'></div>
393 <div class='b red'></div>
394 <div class='b red'></div>
395 </div>
396 <div class='ro'>
397 <div class='b red'></div>
398 <div class='b red'></div>
399 <div class='b red'></div>
400 <div class='b red'></div>
401 <div class='b red'></div>
402 </div>
403 <div class='ro'>
404 <div class='b red'></div>
405 <div class='b red'></div>
406 <div class='b red'></div>
407 <div class='b red'></div>
408 <div class='b red'></div>
409 </div>
410 <div class='ro'>
411 <div class='b red'></div>
412 <div class='b red'></div>
413 <div class='b red'></div>
414 <div class='b red'></div>
415 <div class='b red'></div>
416 </div>
417 </div>
418 <div class='l3 red'></div>
419 <div class='c2 red'></div>
420 <div class='l4 red'></div>
421 <div class='c3 red'></div>
422 <div class='c4 red'></div>
423 <div class='k red'></div>
424 <div class='k1 red'></div>
425 <div class='s'>
426 <div class='ss red'></div>
427 <div class='ss red'></div>
428 <div class='ss red'></div>
429 <div class='ss red'></div>
430 <div class='ss red'></div>
431 <div class='ss red'></div>
432 <div class='ss red'></div>
433 </div>
434 <div class='i1'></div>
435 <div class='i2'></div>
436 <div class='m'>
437 <div class='rx'>
438 <div class='rb-space'></div>
439 </div>
440 <div class='rx'>
441 <div class='rb'></div>
442 </div>
443 <div class='rx'>
444 <div class='rb'></div>
445 </div>
446 <div class='rx'>
447 <div class='rb'></div>
448 </div>
449 <div class='rx'>
450 <div class='rb-space'></div>
451 </div>
452 </div>
453 <div class='n'>
454 <div class='rx'>
455 <div class='rb-space'></div>
456 </div>
457 <div class='rx'>
458 <div class='rb'></div>
459 </div>
460 <div class='rx'>
461 <div class='rb'></div>
462 </div>
463 <div class='rx'>
464 <div class='rb'></div>
465 </div>
466 <div class='rx'>
467 <div class='rb-space'></div>
468 </div>
469 </div>
470 </div>
471 </body>
472 </html>
