微信：unfunction

从A到Z都有，一个都不少 

  1 .A {
  2   position: relative;
  3   left: 30px;
  4   width: 60px;
  5   height: 91px;
  6   border-bottom: solid 14px #000000;
  7 }
  8 .A:before {
  9   -webkit-transform: skew(-19deg, 0);
 10   -moz-transform: skew(-19deg, 0);
 11   -ms-transform: skew(-19deg, 0);
 12   -o-transform: skew(-19deg, 0);
 13   transform: skew(-19deg, 0);
 14   position: absolute;
 15   content: '';
 16   top: 12.5px;
 17   left: 0;
 18   width: 16px;
 19   height: 125px;
 20   background-color: #000000;
 21 }
 22 .A:after {
 23   -webkit-transform: skew(19deg, 0);
 24   -moz-transform: skew(19deg, 0);
 25   -ms-transform: skew(19deg, 0);
 26   -o-transform: skew(19deg, 0);
 27   transform: skew(19deg, 0);
 28   position: absolute;
 29   content: '';
 30   top: 12.5px;
 31   left: 45px;
 32   width: 16px;
 33   height: 125px;
 34   background-color: #000000;
 35 }
 36 .B {
 37   position: relative;
 38   top: 12.5px;
 39   left: 10px;
 40   width: 60px;
 41   height: 125px;
 42   border-left: solid 16px #000000;
 43 }
 44 .B:before {
 45   position: absolute;
 46   content: '';
 47   width: 52px;
 48   height: 39px;
 49   border-width: 15px 15px 10px 0;
 50   border-color: #000000;
 51   border-style: solid;
 52   -webkit-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
 53   -moz-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
 54   -ms-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
 55   -o-border-radius: 0 240% 180% 0 / 0 180% 180% 0;
 56   border-radius: 0 240% 180% 0 / 0 180% 180% 0;
 57 }
 58 .B:after {
 59   position: absolute;
 60   content: '';
 61   bottom: 0;
 62   width: 58px;
 63   height: 43px;
 64   border-width: 10px 15px 15px 0;
 65   border-color: #000000;
 66   border-style: solid;
 67   -webkit-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
 68   -moz-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
 69   -ms-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
 70   -o-border-radius: 0 180% 220% 0 / 0 180% 180% 0;
 71   border-radius: 0 180% 220% 0 / 0 180% 180% 0;
 72 }
 73 .C {
 74   position: relative;
 75   top: 12.5px;
 76   left: 10px;
 77   width: 84px;
 78   height: 95px;
 79   border-width: 15px 12px 15px 16px;
 80   border-color: #000000;
 81   border-style: solid;
 82   -webkit-border-radius: 50%;
 83   -moz-border-radius: 50%;
 84   -ms-border-radius: 50%;
 85   -o-border-radius: 50%;
 86   border-radius: 50%;
 87 }
 88 .C:before {
 89   -webkit-transform: rotate(45deg);
 90   -moz-transform: rotate(45deg);
 91   -ms-transform: rotate(45deg);
 92   -o-transform: rotate(45deg);
 93   transform: rotate(45deg);
 94   position: absolute;
 95   content: '';
 96   top: 2px;
 97   left: 49px;
 98   background-color: #ffffff;
 99   width: 90px;
100   height: 90px;
101 }
102 .D {
103   position: relative;
104   top: 12.5px;
105   left: 10px;
106   border-left: solid 15px #000000;
107   height: 125px;
108 }
109 .D:before {
110   position: absolute;
111   content: '';
112   top: 0;
113   left: 0;
114   width: 60px;
115   height: 95px;
116   border-width: 15px 15px 15px 0;
117   border-color: #000000;
118   border-style: solid;
119   -webkit-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
120   -moz-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
121   -ms-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
122   -o-border-radius: 0 300% 300% 0 / 0 180% 180% 0;
123   border-radius: 0 300% 300% 0 / 0 180% 180% 0;
124 }
125 .E {
126   position: relative;
127   top: 12.5px;
128   left: 10px;
129   width: 63px;
130   height: 95px;
131   border-width: 15px 0 15px 16px;
132   border-color: #000000;
133   border-style: solid;
134 }
135 .E:before {
136   position: absolute;
137   content: '';
138   top: 38px;
139   left: 0px;
140   width: 53px;
141   height: 15px;
142   background-color: #000000;
143 }
144 .F {
145   position: relative;
146   top: 12.5px;
147   left: 10px;
148   width: 63px;
149   height: 110px;
150   border-width: 15px 0 0 16px;
151   border-color: #000000;
152   border-style: solid;
153 }
154 .F:before {
155   position: absolute;
156   content: '';
157   top: 38px;
158   left: 0px;
159   width: 53px;
160   height: 15px;
161   background-color: #000000;
162 }
163 .G {
164   position: relative;
165   top: 12.5px;
166   left: 10px;
167   width: 84px;
168   height: 95px;
169   border-width: 15px 12px 15px 16px;
170   border-color: #000000;
171   border-style: solid;
172   -webkit-border-radius: 50%;
173   -moz-border-radius: 50%;
174   -ms-border-radius: 50%;
175   -o-border-radius: 50%;
176   border-radius: 50%;
177 }
178 .G:before {
179   -webkit-transform: rotate(45deg);
180   -moz-transform: rotate(45deg);
181   -ms-transform: rotate(45deg);
182   -o-transform: rotate(45deg);
183   transform: rotate(45deg);
184   position: absolute;
185   content: '';
186   top: 2px;
187   left: 48px;
188   background-color: #ffffff;
189   width: 90px;
190   height: 90px;
191 }
192 .G:after {
193   position: absolute;
194   content: '';
195   bottom: 0.5px;
196   right: 7px;
197   width: 28px;
198   height: 36px;
199   border-width: 13px 14px 0 0;
200   border-color: #000000;
201   border-style: solid;
202 }
203 .H {
204   position: relative;
205   top: 12.5px;
206   left: 10px;
207   width: 60px;
208   height: 125px;
209   border-width: 0 16px 0 16px;
210   border-color: #000000;
211   border-style: solid;
212 }
213 .H:before {
214   position: absolute;
215   content: '';
216   top: 53px;
217   left: 0;
218   width: 60px;
219   height: 14px;
220   background-color: #000000;
221 }
222 .I {
223   z-index: 1;  
224   position: relative;
225   top: 12.5px;
226   left: 20px;
227   width: 16px;
228   height: 125px;
229   background-color: #000000;
230 }
231 .J {
232   position: relative;
233   top: 12.5px;
234   left: -5px;
235   width: 75px;
236   height: 66px;
237   border-right: solid 16px #000000;
238 }
239 .J:before {
240   position: absolute;
241   content: '';
242   bottom: -60px;
243   right: -16px;
244   width: 50px;
245   height: 60px;
246   border-width: 0 16px 15px 14px;
247   border-color: #000000;
248   border-style: solid;
249   -webkit-border-radius: 0 0 75% 75%;
250   -moz-border-radius: 0 0 75% 75%;
251   -ms-border-radius: 0 0 75% 75%;
252   -o-border-radius: 0 0 75% 75%;
253   border-radius: 0 0 75% 75%;
254 }
255 .J:after {
256   -webkit-transform: rotate(-40deg);
257   -moz-transform: rotate(-40deg);
258   -ms-transform: rotate(-40deg);
259   -o-transform: rotate(-40deg);
260   transform: rotate(-40deg);
261   position: absolute;
262   content: '';
263   top: 40px;
264   left: -20px;
265   width: 60px;
266   height: 60px;
267   background-color: #ffffff;
268 }
269 .K {
270   position: relative;
271   top: 12.5px;
272   left: 10px;
273   width: 80px;
274   height: 125px;
275   border-left: solid 16px #000000;
276   overflow: hidden;
277 }
278 .K:before {
279   -webkit-transform: skew(-43deg, 0);
280   -moz-transform: skew(-43deg, 0);
281   -ms-transform: skew(-43deg, 0);
282   -o-transform: skew(-43deg, 0);
283   transform: skew(-43deg, 0);
284   position: absolute;
285   content: '';
286   top: 0;
287   left: 16px;
288   width: 19px;
289   height: 84px;
290   background-color: #000000;
291 }
292 .K:after {
293   -webkit-transform: skew(30deg, 0);
294   -moz-transform: skew(30deg, 0);
295   -ms-transform: skew(30deg, 0);
296   -o-transform: skew(30deg, 0);
297   transform: skew(30deg, 0);
298   position: absolute;
299   content: '';
300   bottom: 0;
301   right: 25px;
302   width: 18px;
303   height: 80px;
304   background-color: #000000;
305 }
306 .L {
307   position: relative;
308   top: 12.5px;
309   left: 10px;
310   width: 63px;
311   height: 110px;
312   border-width: 0 0 15px 16px;
313   border-color: #000000;
314   border-style: solid;
315 }
316 .M {
317   position: relative;
318   top: 12.5px;
319   left: 10px;
320   width: 80px;
321   height: 125px;
322   border-width: 0 15px 0 15px;
323   border-color: #000000;
324   border-style: solid;
325 }
326 .M:before {
327   -webkit-transform: skew(20deg, 0);
328   -moz-transform: skew(20deg, 0);
329   -ms-transform: skew(20deg, 0);
330   -o-transform: skew(20deg, 0);
331   transform: skew(20deg, 0);
332   position: absolute;
333   content: '';
334   top: 0;
335   left: 14px;
336   width: 12px;
337   height: 110px;
338   background-color: #000000;
339 }
340 .M:after {
341   -webkit-transform: skew(-20deg, 0);
342   -moz-transform: skew(-20deg, 0);
343   -ms-transform: skew(-20deg, 0);
344   -o-transform: skew(-20deg, 0);
345   transform: skew(-20deg, 0);
346   position: absolute;
347   content: '';
348   top: 0;
349   right: 14px;
350   width: 12px;
351   height: 110px;
352   background-color: #000000;
353 }
354 .N {
355   position: relative;
356   top: 12.5px;
357   left: 10px;
358   width: 63px;
359   height: 125px;
360   border-width: 0 15px 0 15px;
361   border-color: #000000;
362   border-style: solid;
363 }
364 .N:before {
365   -webkit-transform: skew(30deg, 0);
366   -moz-transform: skew(30deg, 0);
367   -ms-transform: skew(30deg, 0);
368   -o-transform: skew(30deg, 0);
369   transform: skew(30deg, 0);
370   position: absolute;
371   content: '';
372   top: 0;
373   left: 24px;
374   width: 15px;
375   height: 125px;
376   background-color: #000000;
377 }
378 .O {
379   position: relative;
380   top: 12.5px;
381   left: 10px;
382   width: 70px;
383   height: 97px;
384   border-width: 14px 16px 14px 16px;
385   border-color: #000000;
386   border-style: solid;
387   -webkit-border-radius: 55% / 52%;
388   -moz-border-radius: 55% / 52%;
389   -ms-border-radius: 55% / 52%;
390   -o-border-radius: 55% / 52%;
391   border-radius: 55% / 52%;
392 }
393 .P {
394   position: relative;
395   top: 12.5px;
396   left: 10px;
397   width: 60px;
398   height: 125px;
399   border-left: solid 16px #000000;
400 }
401 .P:before {
402   position: absolute;
403   content: '';
404   width: 56px;
405   height: 50px;
406   border-width: 13px 15px 13px 0;
407   border-color: #000000;
408   border-style: solid;
409   -webkit-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
410   -moz-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
411   -ms-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
412   -o-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
413   border-radius: 0 220% 220% 0 / 0 180% 180% 0;
414 }
415 .Q {
416   z-index: -1;
417   position: relative;
418   top: 12.5px;
419   left: 10px;
420   width: 70px;
421   height: 97px;
422   border-width: 14px 16px 14px 16px;
423   border-color: #000000;
424   border-style: solid;
425   -webkit-border-radius: 55% / 52%;
426   -moz-border-radius: 55% / 52%;
427   -ms-border-radius: 55% / 52%;
428   -o-border-radius: 55% / 52%;
429   border-radius: 55% / 52%;
430 }
431 .Q:before {
432   -webkit-transform: rotate(-84deg);
433   -moz-transform: rotate(-84deg);
434   -ms-transform: rotate(-84deg);
435   -o-transform: rotate(-84deg);
436   transform: rotate(-84deg);
437   position: absolute;
438   content: '';
439   top: 82px;
440   left: 49px;
441   width: 16px;
442   height: 48px;
443   border-width: 16px 0 13px 13px;
444   border-color: #000000;
445   border-style: solid;
446   -webkit-border-radius: 200% 0 0 200% / 100% 0 0 100%;
447   -moz-border-radius: 200% 0 0 200% / 100% 0 0 100%;
448   -ms-border-radius: 200% 0 0 200% / 100% 0 0 100%;
449   -o-border-radius: 200% 0 0 200% / 100% 0 0 100%;
450   border-radius: 200% 0 0 200% / 100% 0 0 100%;
451 }
452 .Q:after {
453   -webkit-transform: rotate(-18deg);
454   -moz-transform: rotate(-18deg);
455   -ms-transform: rotate(-18deg);
456   -o-transform: rotate(-18deg);
457   transform: rotate(-18deg);
458   position: absolute;
459   content: '';
460   bottom: -35px;
461   right: -44px;
462   width: 30px;
463   height: 30px;
464   background-color: #ffffff;
465 }
466 .R {
467   position: relative;
468   top: 12.5px;
469   left: 10px;
470   width: 60px;
471   height: 125px;
472   border-left: solid 16px #000000;
473 }
474 .R:before {
475   position: absolute;
476   content: '';
477   width: 52px;
478   height: 44px;
479   border-width: 13px 15px 13px 0;
480   border-color: #000000;
481   border-style: solid;
482   -webkit-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
483   -moz-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
484   -ms-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
485   -o-border-radius: 0 220% 220% 0 / 0 180% 180% 0;
486   border-radius: 0 220% 220% 0 / 0 180% 180% 0;
487 }
488 .R:after {
489   -webkit-transform: skew(32deg, 0);
490   -moz-transform: skew(32deg, 0);
491   -ms-transform: skew(32deg, 0);
492   -o-transform: skew(32deg, 0);
493   transform: skew(32deg, 0);
494   position: absolute;
495   content: '';
496   bottom: 0;
497   left: 38px;
498   width: 18px;
499   height: 58px;
500   background-color: #000000;
501 }
502 .S {
503   -webkit-transform: rotate(14deg);
504   -moz-transform: rotate(14deg);
505   -ms-transform: rotate(14deg);
506   -o-transform: rotate(14deg);
507   transform: rotate(14deg);
508   position: relative;
509   width: 105px;
510   height: 150px;
511   top: 10px;
512   left: 10px;
513 }
514 .S:before {
515   -webkit-transform: rotate(18deg);
516   -moz-transform: rotate(18deg);
517   -ms-transform: rotate(18deg);
518   -o-transform: rotate(18deg);
519   transform: rotate(18deg);
520   position: absolute;
521   content: '';
522   width: 44px;
523   height: 40px;
524   border-width: 14px 0 15px 15.5px;
525   border-color: #000000;
526   border-style: solid;
527   -webkit-border-radius: 220% 0 0 150% / 150% 0 0 100%;
528   -moz-border-radius: 220% 0 0 150% / 150% 0 0 100%;
529   -ms-border-radius: 220% 0 0 150% / 150% 0 0 100%;
530   -o-border-radius: 220% 0 0 150% / 150% 0 0 100%;
531   border-radius: 220% 0 0 150% / 150% 0 0 100%;
532 }
533 .S:after {
534   -webkit-transform: rotate(198deg);
535   -moz-transform: rotate(198deg);
536   -ms-transform: rotate(198deg);
537   -o-transform: rotate(198deg);
538   transform: rotate(198deg);
539   position: absolute;
540   content: '';
541   top: 65px;
542   left: 21px;
543   width: 52px;
544   height: 44px;
545   border-width: 14px 0 15px 15px;
546   border-color: #000000;
547   border-style: solid;
548   -webkit-border-radius: 240% 0 0 110% / 140% 0 0 100%;
549   -moz-border-radius: 240% 0 0 110% / 140% 0 0 100%;
550   -ms-border-radius: 240% 0 0 110% / 140% 0 0 100%;
551   -o-border-radius: 240% 0 0 110% / 140% 0 0 100%;
552   border-radius: 240% 0 0 110% / 140% 0 0 100%;
553 }
554 .T {
555   position: relative;
556   top: 12.5px;
557   left: 10px;
558   width: 100px;
559   height: 125px;
560   border-top: solid 15px #000000;
561 }
562 .T:before {
563   position: absolute;
564   content: '';
565   top: 0;
566   left: 42px;
567   width: 16px;
568   height: 110px;
569   background-color: #000000;
570 }
571 .U {
572   position: relative;
573   top: 12.5px;
574   left: 10px;
575   width: 60px;
576   height: 80px;
577   border-width: 0 16px 0 16px;
578   border-color: #000000;
579   border-style: solid;
580 }
581 .U:before {
582   position: absolute;
583   content: '';
584   top: 65px;
585   left: -16px;
586   width: 60px;
587   height: 45px;
588   border-width: 0 16px 15px 16px;
589   border-color: #000000;
590   border-style: solid;
591   -webkit-border-radius: 0 0 200% 200% / 0 0 300% 300%;
592   -moz-border-radius: 0 0 200% 200% / 0 0 300% 300%;
593   -ms-border-radius: 0 0 200% 200% / 0 0 300% 300%;
594   -o-border-radius: 0 0 200% 200% / 0 0 300% 300%;
595   border-radius: 0 0 200% 200% / 0 0 300% 300%;
596 }
597 .V {
598   position: relative;
599   top: 12.5px;
600   left: 30px;
601   width: 59px;
602 }
603 .V:before {
604   -webkit-transform: skew(18deg, 0);
605   -moz-transform: skew(18deg, 0);
606   -ms-transform: skew(18deg, 0);
607   -o-transform: skew(18deg, 0);
608   transform: skew(18deg, 0);
609   position: absolute;
610   content: '';
611   top: 0;
612   left: 0;
613   height: 125px;
614   border-left: solid 16px #000000;
615 }
616 .V:after {
617   -webkit-transform: skew(-18deg, 0);
618   -moz-transform: skew(-18deg, 0);
619   -ms-transform: skew(-18deg, 0);
620   -o-transform: skew(-18deg, 0);
621   transform: skew(-18deg, 0);
622   position: absolute;
623   content: '';
624   top: 0;
625   right: 0;
626   height: 125px;
627   border-left: solid 16px #000000;
628 }
629 .W {
630   position: relative;
631   top: 12.5px;
632   left: 25px;
633   width: 100px;
634 }
635 .W:before {
636   -webkit-transform: skew(11deg, 0);
637   -moz-transform: skew(11deg, 0);
638   -ms-transform: skew(11deg, 0);
639   -o-transform: skew(11deg, 0);
640   transform: skew(11deg, 0);
641   position: absolute;
642   content: '';
643   top: 0;
644   left: 0;
645   width: 42px;
646   height: 125px;
647   border-width: 0 13px 0 15px;
648   border-color: #000000;
649   border-style: solid;
650 }
651 .W:after {
652   -webkit-transform: skew(-11deg, 0);
653   -moz-transform: skew(-11deg, 0);
654   -ms-transform: skew(-11deg, 0);
655   -o-transform: skew(-11deg, 0);
656   transform: skew(-11deg, 0);
657   position: absolute;
658   content: '';
659   top: 0;
660   right: 0;
661   width: 42px;
662   height: 125px;
663   border-width: 0 15px 0 13px;
664   border-color: #000000;
665   border-style: solid;
666 }
667 .X {
668   position: relative;
669   top: 12.5px;
670   left: 50px;
671   width: 16px;
672   height: 125px;
673 }
674 .X:before {
675   -webkit-transform: skew(32deg, 0);
676   -moz-transform: skew(32deg, 0);
677   -ms-transform: skew(32deg, 0);
678   -o-transform: skew(32deg, 0);
679   transform: skew(32deg, 0);
680   position: absolute;
681   content: '';
682   top: 0;
683   left: 0;
684   width: 16px;
685   height: 125px;
686   background-color: #000000;
687 }
688 .X:after {
689   -webkit-transform: skew(-32deg, 0);
690   -moz-transform: skew(-32deg, 0);
691   -ms-transform: skew(-32deg, 0);
692   -o-transform: skew(-32deg, 0);
693   transform: skew(-32deg, 0);
694   position: absolute;
695   content: '';
696   top: 0;
697   right: 0;
698   width: 16px;
699   height: 125px;
700   background-color: #000000;
701 }
702 .Y {
703   position: relative;
704   top: 92.5px;
705   left: 52px;
706   width: 16px;
707   height: 50px;
708   background-color: #000000;
709 }
710 .Y:before {
711   -webkit-transform: skew(28deg, 0);
712   -moz-transform: skew(28deg, 0);
713   -ms-transform: skew(28deg, 0);
714   -o-transform: skew(28deg, 0);
715   transform: skew(28deg, 0);
716   position: absolute;
717   content: '';
718   top: -80px;
719   left: -21px;
720   width: 16px;
721   height: 80px;
722   background-color: #000000;
723 }
724 .Y:after {
725   -webkit-transform: skew(-28deg, 0);
726   -moz-transform: skew(-28deg, 0);
727   -ms-transform: skew(-28deg, 0);
728   -o-transform: skew(-28deg, 0);
729   transform: skew(-28deg, 0);
730   position: absolute;
731   content: '';
732   top: -80px;
733   right: -21px;
734   width: 16px;
735   height: 80px;
736   background-color: #000000;
737 }
738 .Z {
739   position: relative;
740   top: 12.5px;
741   left: 10px;
742   width: 90px;
743   height: 95px;
744   border-width: 15px 0 15px 0;
745   border-color: #000000;
746   border-style: solid;
747 }
748 .Z:before {
749   -webkit-transform: skew(-37deg, 0);
750   -moz-transform: skew(-37deg, 0);
751   -ms-transform: skew(-37deg, 0);
752   -o-transform: skew(-37deg, 0);
753   transform: skew(-37deg, 0);
754   position: absolute;
755   content: '';
756   top: 0;
757   left: 36px;
758   width: 18px;
759   height: 95px;
760   background-color: #000000;
761 }

试试吧，注意类的大小写！

posted @ 2016-02-23 15:45  混在成都  阅读(164)  评论(0)    收藏  举报