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>
