从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 }
试试吧，注意类的大小写！
混在成都微信：unfunction
