• .A{
    position:relative;
    left:30px;
    width:60px;
    height:91px;
    border-bottom:solid 14px#000000;
    }
    .A:before{
    transform:skew(-19deg,0);
    position:absolute;
    content:'';
    top:12.5px;
    left:0;
    width:16px;
    height:125px;
    background-color:#000000;
    }
    .A:after{
    transform:skew(19deg,0);
    position:absolute;
    content:'';
    top:12.5px;
    left:45px;
    width:16px;
    height:125px;
    background-color:#000000;
    }
  • .B{
    position:relative;
    top:12.5px;
    left:10px;
    width:60px;
    height:125px;
    border-left:solid 16px#000000;
    }
    .B:before{
    position:absolute;
    content:'';
    width:52px;
    height:39px;
    border-width:15px15px10px0;
    border-color:#000000;
    border-style:solid;
    border-radius:0 240%180%0 /0 180%180%0;
    }
    .B:after{
    position:absolute;
    content:'';
    bottom:0;
    width:58px;
    height:43px;
    border-width:10px15px15px0;
    border-color:#000000;
    border-style:solid;
    border-radius:0 180%220%0 /0 180%180%0;
    }
  • .C{
    position:relative;
    top:12.5px;
    left:10px;
    width:84px;
    height:95px;
    border-width:15px12px15px16px;
    border-color:#000000;
    border-style:solid;
    border-radius:50%;
    }
    .C:before{
    transform:rotate(45deg);
    position:absolute;
    content:'';
    top:2px;
    left:49px;
    background-color:#ffffff;
    width:90px;
    height:90px;
    }
  • .D{
    position:relative;
    top:12.5px;
    left:10px;
    border-left:solid 15px#000000;
    height:125px;
    }
    .D:before{
    position:absolute;
    content:'';
    top:0;
    left:0;
    width:60px;
    height:95px;
    border-width:15px15px15px0;
    border-color:#000000;
    border-style:solid;
    border-radius:0 300%300%0 /0 180%180%0;
    }
  • .E{
    position:relative;
    top:12.5px;
    left:10px;
    width:63px;
    height:95px;
    border-width:15px0 15px16px;
    border-color:#000000;
    border-style:solid;
    }
    .E:before{
    position:absolute;
    content:'';
    top:38px;
    left:0px;
    width:53px;
    height:15px;
    background-color:#000000;
    }
  • .F{
    position:relative;
    top:12.5px;
    left:10px;
    width:63px;
    height:110px;
    border-width:15px0 0 16px;
    border-color:#000000;
    border-style:solid;
    }
    .F:before{
    position:absolute;
    content:'';
    top:38px;
    left:0px;
    width:53px;
    height:15px;
    background-color:#000000;
    }
  • .G{
    position:relative;
    top:12.5px;
    left:10px;
    width:84px;
    height:95px;
    border-width:15px12px15px16px;
    border-color:#000000;
    border-style:solid;
    border-radius:50%;
    }
    .G:before{
    transform:rotate(45deg);
    position:absolute;
    content:'';
    top:2px;
    left:48px;
    background-color:#ffffff;
    width:90px;
    height:90px;
    }
    .G:after{
    position:absolute;
    content:'';
    bottom:0.5px;
    right:7px;
    width:28px;
    height:36px;
    border-width:13px14px0 0;
    border-color:#000000;
    border-style:solid;
    }
  • .H{
    position:relative;
    top:12.5px;
    left:10px;
    width:60px;
    height:125px;
    border-width:0 16px0 16px;
    border-color:#000000;
    border-style:solid;
    }
    .H:before{
    position:absolute;
    content:'';
    top:53px;
    left:0;
    width:60px;
    height:14px;
    background-color:#000000;
    }
  • .I{
    z-index:1;
    position:relative;
    top:12.5px;
    left:20px;
    width:16px;
    height:125px;
    background-color:#000000;
    }
  • .J{
    position:relative;
    top:12.5px;
    left:-5px;
    width:75px;
    height:66px;
    border-right:solid 16px#000000;
    }
    .J:before{
    position:absolute;
    content:'';
    bottom:-60px;
    right:-16px;
    width:50px;
    height:60px;
    border-width:0 16px 15px 14px;
    border-color:#000000;
    border-style:solid;
    border-radius:0 0 75%75%;
    }
    .J:after{
    transform:rotate(-40deg);
    position:absolute;
    content:'';
    top:40px;
    left:-20px;
    width:60px;
    height:60px;
    background-color:#ffffff;
    }
  • .K{
    position:relative;
    top:12.5px;
    left:10px;
    width:80px;
    height:125px;
    border-left:solid 16px#000000;
    overflow:hidden;
    }
    .K:before{
    transform:skew(-43deg,0);
    position:absolute;
    content:'';
    top:0;
    left:16px;
    width:19px;
    height:84px;
    background-color:#000000;
    }
    .K:after{
    transform:skew(30deg,0);
    position:absolute;
    content:'';
    bottom:0;
    right:25px;
    width:18px;
    height:80px;
    background-color:#000000;
    }
  • .L{
    position:relative;
    top:12.5px;
    left:10px;
    width:63px;
    height:110px;
    border-width:0 0 15px16px;
    border-color:#000000;
    border-style:solid;
    }
  • .M{
    position:relative;
    top:12.5px;
    left:10px;
    width:80px;
    height:125px;
    border-width:0 15px0 15px;
    border-color:#000000;
    border-style:solid;
    }
    .M:before{
    transform:skew(20deg,0);
    position:absolute;
    content:'';
    top:0;
    left:14px;
    width:12px;
    height:110px;
    background-color:#000000;
    }
    .M:after{
    transform:skew(-20deg,0);
    position:absolute;
    content:'';
    top:0;
    right:14px;
    width:12px;
    height:110px;
    background-color:#000000;
    }
  • .N{
    position:relative;
    top:12.5px;
    left:10px;
    width:63px;
    height:125px;
    border-width:0 15px0 15px;
    border-color:#000000;
    border-style:solid;
    }
    .N:before{
    transform:skew(30deg,0);
    position:absolute;
    content:'';
    top:0;
    left:24px;
    width:15px;
    height:125px;
    background-color:#000000;
    }
  • .O{
    position:relative;
    top:12.5px;
    left:10px;
    width:70px;
    height:97px;
    border-width:14px16px14px16px;
    border-color:#000000;
    border-style:solid;
    border-radius:55% /52%;
    }
  • .P{
    position:relative;
    top:12.5px;
    left:10px;
    width:60px;
    height:125px;
    border-left:solid 16px#000000;
    }
    .P:before{
    position:absolute;
    content:'';
    width:56px;
    height:50px;
    border-width:13px15px13px0;
    border-color:#000000;
    border-style:solid;
    border-radius:0 220%220%0 /0 180%180%0;
    }
  • .Q {
    z-index:-1;
    position:relative;
    top:12.5px;
    left:10px;
    width:70px;
    height:97px;
    border-width:14px16px14px16px;
    border-color:#000000;
    border-style:solid;
    border-radius:55% /52%;
    }
    .Q:before{
    transform:rotate(-84deg);
    position:absolute;
    content:'';
    top:82px;
    left:49px;
    width:16px;
    height:48px;
    border-width:16px0 13px13px;
    border-color:#000000;
    border-style:solid;
    border-radius:200%0 0 200% /100%0 0 100%;
    }
    .Q:after{
    transform:rotate(-18deg);
    position:absolute;
    content:'';
    bottom:-35px;
    right:-44px;
    width:30px;
    height:30px;
    background-color:#ffffff;
    }
  • .R{
    position:relative;
    top:12.5px;
    left:10px;
    width:60px;
    height:125px;
    border-left:solid 16px#000000;
    }
    .R:before{
    position:absolute;
    content:'';
    width:52px;
    height:44px;
    border-width:13px15px13px0;
    border-color:#000000;
    border-style:solid;
    border-radius:0 220%220%0 /0 180%180%0;
    }
    .R:after{
    transform:skew(32deg,0);
    position:absolute;
    content:'';
    bottom:0;
    left:38px;
    width:18px;
    height:58px;
    background-color:#000000;
    }
  • .S{
    transform:rotate(14deg);
    position:relative;
    width:105px;
    height:150px;
    top:10px;
    left:10px;
    }
    .S:before{
    transform:rotate(18deg);
    position:absolute;
    content:'';
    width:44px;
    height:40px;
    border-width:14px0 15px15.5px;
    border-color:#000000;
    border-style:solid;
    border-radius:220%0 0 150% /150%0 0 100%;
    }
    .S:after{
    transform:rotate(198deg);
    position:absolute;
    content:'';
    top:65px;
    left:21px;
    width:52px;
    height:44px;
    border-width:14px0 15px15px;
    border-color:#000000;
    border-style:solid;
    border-radius:240%0 0 110% /140%0 0 100%;
    }
  • .T{
    position:relative;
    top:12.5px;
    left:10px;
    width:100px;
    height:125px;
    border-top:solid 15px#000000;
    }
    .T:before{
    position:absolute;
    content:'';
    top:0;
    left:42px;
    width:16px;
    height:110px;
    background-color:#000000;
    }
  • .U{
    position:relative;
    top:12.5px;
    left:10px;
    width:60px;
    height:80px;
    border-width:0 16px0 16px;
    border-color:#000000;
    border-style:solid;
    }
    .U:before{
    position:absolute;
    content:'';
    top:65px;
    left:-16px;
    width:60px;
    height:45px;
    border-width:0 16px15px16px;
    border-color:#000000;
    border-style:solid;
    border-radius:0 0 200%200% /0 0 300%300%;
    }
  • .V{
    position:relative;
    top:12.5px;
    left:30px;
    width:59px;
    }
    .V:before{
    transform:skew(18deg,0);
    position:absolute;
    content:'';
    top:0;
    left:0;
    height:125px;
    border-left:solid 16px#000000;
    }
    .V:after{
    transform:skew(-18deg,0);
    position:absolute;
    content:'';
    top:0;
    right:0;
    height:125px;
    border-left:solid 16px#000000;
    }
  • .W{
    position:relative;
    top:12.5px;
    left:25px;
    width:100px;
    }
    .W:before{
    transform:skew(11deg,0);
    position:absolute;
    content:'';
    top:0;
    left:0;
    width:42px;
    height:125px;
    border-width:0 13px0 15px;
    border-color:#000000;
    border-style:solid;
    }
    .W:after{
    transform:skew(-11deg,0);
    position:absolute;
    content:'';
    top:0;
    right:0;
    width:42px;
    height:125px;
    border-width:0 15px0 13px;
    border-color:#000000;
    border-style:solid;
    }
  • .X{
    position:relative;
    top:12.5px;
    left:50px;
    width:16px;
    height:125px;
    }
    .X:before{
    transform:skew(32deg,0);
    position:absolute;
    content:'';
    top:0;
    left:0;
    width:16px;
    height:125px;
    background-color:#000000;
    }
    .X:after{
    transform:skew(-32deg,0);
    position:absolute;
    content:'';
    top:0;
    right:0;
    width:16px;
    height:125px;
    background-color:#000000;
    }
  • .Y{
    position:relative;
    top:92.5px;
    left:52px;
    width:16px;
    height:50px;
    background-color:#000000;
    }
    .Y:before{
    transform:skew(28deg,0);
    position:absolute;
    content:'';
    top:-80px;
    left:-21px;
    width:16px;
    height:80px;
    background-color:#000000;
    }
    .Y:after{
    transform:skew(-28deg,0);
    position:absolute;
    content:'';
    top:-80px;
    right:-21px;
    width:16px;
    height:80px;
    background-color:#000000;
    }
  • .Z{
    position:relative;
    top:12.5px;
    left:10px;
    width:90px;
    height:95px;
    border-width:15px0 15px0;
    border-color:#000000;
    border-style:solid;
    }
    .Z:before{
    transform:skew(-37deg,0);
    position:absolute;
    content:'';
    top:0;
    left:36px;
    width:18px;
    height:95px;
    background-color:#000000;
    }
用纯CSS3绘制26个英文字母
  1. xero:真心很不错,...不过伪元素在CSS3中推荐是两个冒号,比如 A::after {}
  2. 奥巴马:碉堡了。。。
  3. 王晓刚:挺6的~~受益匪浅~~~

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注