当前位置：Gxlcms > css > 如何使用纯CSS3绘制26个英文字母的示例详解

如何使用纯CSS3绘制26个英文字母的示例详解

时间：2021-07-01 10:21:17 帮助过：10人阅读

纯CSS3绘制26个英文字母

在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。

网页代码中用到（<!-- 浮动p换行 --> <p style="clear:both">）和p边距设置和浮动（margin:20px 5px 10px 80px; float: left;）。其中边距Margin四个像素依次代表：上右下左。

以下按字母表顺序，列出绘制26个字母的CSS。

  1.    .A{
  2.       position:relative;
  3.       margin:10px 30px 10px 5px;  /*上右下左 */
  4.       float: left;
  5.       left:30px;
  6.       width:60px;
  7.       height:91px;
  8.       border-bottom:solid 14px #0feee2;
  9.     }
  10.     .A:before{
  11.       transform:skew(-19deg,0);
  12.       position:absolute;
  13.       content:'';
  14.       top:12.5px;
  15.       left:0;
  16.       width:16px;
  17.       height:125px;
  18.       background-color:#0feee2;
  19.     }
  20.     .A:after{
  21.       transform:skew(19deg,0);
  22.       position:absolute;
  23.       content:'';
  24.       top:12.5px;
  25.       left:45px;
  26.       width:16px;
  27.       height:125px;
  28.       background-color:#0feee2;
  29.     }

  1.   .B{
  2.       position:relative;
  3.       margin:10px 20px 10px 30px;
  4.       float: left;
  5.       top:12.5px;
  6.       left:10px;
  7.       width:60px;
  8.       height:125px;
  9.       border-left:solid 16px #2056cd;
  10.     }
  11.     .B:before{
  12.       position:absolute;
  13.       content:'';
  14.       width:52px;
  15.       height:39px;
  16.       border-width:15px 15px 10px 0;
  17.       border-color:#2056cd;
  18.       border-style:solid;
  19.       border-radius:0 240%180%0 /0 180%180%0;
  20.    }
  21.    .B:after{
  22.       position:absolute;
  23.       content:'';
  24.       bottom:0;
  25.       width:58px;
  26.       height:43px;
  27.       border-width:10px 15px 15px 0;
  28.       border-color:#2056cd;
  29.       border-style:solid;
  30.       border-radius:0 180%220%0 /0 180%180%0;
  31.      }


  1.    .C{
  2.        position:relative;
  3.        margin:10px 5px 10px 10px;
  4.        float: left;
  5.        top:12.5px;
  6.        left:10px;
  7.        width:84px;
  8.        height:95px;
  9.        border-width:15px 12px 15px 16px;
  10.        border-color:#87adef;
  11.        border-style:solid;
  12.        border-radius:50%;
  13.      }
  14.      .C:before{
  15.        transform:rotate(45deg);
  16.        position:absolute;
  17.        content:'';
  18.        top:2px;
  19.        left:49px;
  20.        width:90px;
  21.        height:90px;
  22.        background-color:#ffffff;
  23.      }

  1.   .D{
  2.        position:relative;
  3.        margin:10px 20px 10px 5px;
  4.        float: left;
  5.        top:12.5px;
  6.        left:10px;
  7.        border-left:solid 15px #ade081;
  8.        height:125px;
  9.      }
  10.      .D:before{
  11.        position:absolute;
  12.        content:'';
  13.        top:0;
  14.        left:0;
  15.        width:60px;
  16.        height:95px;
  17.        border-width:15px 15px 15px 0;
  18.        border-color:#ade081;
  19.        border-style:solid;
  20.        border-radius:0 300%300%0 /0 180%180%0;
  21.       }

  1.    .E{
  2.         position:relative;
  3.         margin:10px 10px 10px 60px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:63px;
  8.         height:95px;
  9.         border-width:15px 0 15px 16px;
  10.         border-color:#cd2388;
  11.         border-style:solid;
  12.       }
  13.       .E:before{
  14.         position:absolute;
  15.         content:'';
  16.         top:38px;
  17.         left:0px;
  18.         width:53px;
  19.         height:15px;
  20.         background-color:#cd2388;
  21.       }

  1.    .F{
  2.         position:relative;
  3.         margin:10px 5px 10px 10px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:63px;
  8.         height:110px;
  9.         border-width:15px 0 0 16px;
  10.         border-color:#668899;
  11.         border-style:solid;
  12.        }
  13.       .F:before{
  14.         position:absolute;
  15.         content:'';
  16.         top:38px;
  17.         left:0px;
  18.         width:53px;
  19.         height:15px;
  20.         background-color:#668899;
  21.       }


  1.    .G{
  2.         position:relative;
  3.         margin:10px 5px 10px 5px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:84px;
  8.         height:95px;
  9.         border-width:15px 12px 15px 16px;
  10.         border-color:#f0af00;
  11.         border-style:solid;
  12.         border-radius:50%;
  13.        }
  14.        .G:before{
  15.          transform:rotate(45deg);
  16.          position:absolute;
  17.          content:'';
  18.          top:2px;
  19.          left:48px;
  20.          background-color:#ffffff;
  21.          width:90px;
  22.          height:90px;
  23.        }
  24.       .G:after{
  25.         position:absolute;
  26.         content:'';
  27.         bottom:0.5px;
  28.         right:7px;
  29.         width:28px;
  30.         height:36px;
  31.         border-width:13px 14px 0 0;
  32.         border-color:#f0af00;
  33.         border-style:solid;
  34.       }

  1.    .H{
  2.         position:relative;
  3.         margin:10px 10px 10px 5px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:60px;
  8.         height:125px;
  9.         border-width:0 16px 0 16px;
  10.         border-color:#cde680;
  11.         border-style:solid;
  12.        }
  13.        .H:before{
  14.         position:absolute;
  15.         content:'';
  16.         top:53px;
  17.         left:0;
  18.         width:60px;
  19.         height:14px;
  20.         background-color:#cde680;
  21.        }

  1.    .I{
  2.         z-index:1;
  3.         position:relative;
  4.         margin:10px 10px 10px 10px;
  5.         float: left;
  6.         top:12.5px;
  7.         left:20px;
  8.         width:16px;
  9.         height:125px;
  10.         background-color:#020a0f;
  11.        }

  1.    .J{
  2.          position:relative;
  3.          margin:10px 5px 10px 5px;
  4.          float: left;
  5.          top:12.5px;
  6.          left:-5px;
  7.          width:75px;
  8.          height:66px;
  9.          border-right:solid 16px #b0c0d0;
  10.       }
  11.       .J:before{
  12.          position:absolute;
  13.          content:'';
  14.          bottom:-60px;
  15.          right:-16px;
  16.          width:50px;
  17.          height:60px;
  18.          border-width:0 16px 15px 14px;
  19.          border-color:#b0c0d0;
  20.          border-style:solid;
  21.          border-radius:0 0 75%75%;
  22.        }
  23.        .J:after{
  24.          transform:rotate(-40deg);
  25.          position:absolute;
  26.          content:'';
  27.          top:40px;
  28.          left:-20px;
  29.          width:60px;
  30.          height:60px;
  31.          background-color:#ffffff;
  32.         }

  1.    .K{
  2.        position:relative;
  3.        margin:10px 5px 10px 5px;
  4.        float: left;
  5.        top:12.5px;
  6.        left:10px;
  7.        width:80px;
  8.        height:125px;
  9.        border-left:solid 16px #ce6688;
  10.        overflow:hidden;
  11.       }
  12.       .K:before{
  13.         transform:skew(-43deg,0);
  14.         position:absolute;
  15.         content:'';
  16.         top:0;
  17.         left:16px;
  18.         width:19px;
  19.         height:84px;
  20.         background-color:#ce6688;
  21.       }
  22.       .K:after{
  23.         transform:skew(30deg,0);
  24.         position:absolute;
  25.         content:'';
  26.         bottom:0;
  27.         right:25px;
  28.         width:18px;
  29.         height:80px;
  30.         background-color:#ce6688;
  31.        }

  1.    .L{
  2.         position:relative;
  3.         margin:10px 5px 10px 5px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:63px;
  8.         height:110px;
  9.         border-width:0 0 15px 16px;
  10.         border-color:#998800;
  11.         border-style:solid;
  12.        }

  1.    .M{
  2.         position:relative;
  3.         margin:10px 5px 10px 5px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:80px;
  8.         height:125px;
  9.         border-width:0 15px 0 15px;
  10.         border-color:#ff0000;
  11.         border-style:solid;
  12.        }
  13.        .M:before{
  14.         transform:skew(20deg,0);
  15.         position:absolute;
  16.         content:'';
  17.         top:0;
  18.         left:14px;
  19.         width:12px;
  20.         height:110px;
  21.         background-color:#ff0000;
  22.        }
  23.        .M:after{
  24.         transform:skew(-20deg,0);
  25.         position:absolute;
  26.         content:'';
  27.         top:0;
  28.         right:14px;
  29.         width:12px;
  30.         height:110px;
  31.         background-color:#ff0000;
  32.        }

  1.     .N{
  2.         position:relative;
  3.         margin:10px 5px 10px 5px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:63px;
  8.         height:125px;
  9.         border-width:0 15px 0 15px;
  10.         border-color:#9aff02;
  11.         border-style:solid;
  12.        }
  13.        .N:before{
  14.         transform:skew(30deg,0);
  15.         position:absolute;
  16.         content:'';
  17.         top:0;
  18.         left:24px;
  19.         width:15px;
  20.         height:125px;
  21.         background-color:#9aff02;
  22.       }

  1.    .O{
  2.         position:relative;
  3.         margin:10px 5px 10px 5px;
  4.         float: left;
  5.         top:12.5px;
  6.         left:10px;
  7.         width:70px;
  8.         height:97px;
  9.         border-width:14px 16px 14px 16px;
  10.         border-color:#ffff40;
  11.         border-style:solid;
  12.         border-radius:55% /52%;
  13.        }

  1.     .P{
  2.        position:relative;
  3.        margin:10px 5px 10px 5px;
  4.        float: left;
  5.        top:12.5px;
  6.        left:10px;
  7.        width:60px;
  8.        height:125px;
  9.        border-left:solid 16px #00ffff;
  10.       }
  11.       .P:before{
  12.        position:absolute;
  13.        content:'';
  14.        width:56px;
  15.        height:50px;
  16.        border-width:13px 15px 13px 0;
  17.        border-color:#00ffff;
  18.        border-style:solid;
  19.        border-radius:0 220%220%0 /0 180%180%0;
  20.       }

  1.    .Q {
  2.        z-index:-1;
  3.        position:relative;
  4.        margin:10px 5px 10px 5px;
  5.        float: left;
  6.        top:12.5px;
  7.        left:10px;
  8.        width:70px;
  9.        height:97px;
  10.        border-width:14px 16px 14px 16px;
  11.        border-color:#deff00;
  12.        border-style:solid;
  13.        border-radius:55% /52%;
  14.      }
  15.      .Q:before{
  16.        transform:rotate(-84deg);
  17.        position:absolute;
  18.        content:'';
  19.        top:82px;
  20.        left:49px;
  21.        width:16px;
  22.        height:48px;
  23.        border-width:16px 0 13px 13px;
  24.        border-color:#deff00;
  25.        border-style:solid;
  26.        border-radius:200%0 0 200% /100%0 0 100%;
  27.      }
  28.      .Q:after{
  29.        transform:rotate(-18deg);
  30.        position:absolute;
  31.        content:'';
  32.        bottom:-35px;
  33.        right:-44px;
  34.        width:30px;
  35.        height:30px;
  36.        background-color:#ffffff;
  37.      }

  1.    .R{
  2.      position:relative;
  3.      margin:10px 5px 10px 5px;
  4.      float: left;
  5.      top:12.5px;
  6.      left:10px;
  7.      width:60px;
  8.      height:125px;
  9.      border-left:solid 16px #a0b0c0;
  10.     }
  11.     .R:before{
  12.      position:absolute;
  13.      content:'';
  14.      width:52px;
  15.      height:44px;
  16.      border-width:13px 15px 13px 0;
  17.      border-color:#a0b0c0;
  18.      border-style:solid;
  19.      border-radius:0 220%220%0 /0 180%180%0;
  20.     }
  21.     .R:after{
  22.      transform:skew(32deg,0);
  23.      position:absolute;
  24.      content:'';
  25.      bottom:0;
  26.      left:38px;
  27.      width:18px;
  28.      height:58px;
  29.      background-color:#a0b0c0;
  30.    }

  1.    .S{
  2.      transform:rotate(14deg);
  3.      position:relative;
  4.      margin:10px 5px 10px 5px;
  5.      float: left;
  6.      width:105px;
  7.      height:150px;
  8.      top:10px;
  9.      left:10px;
  10.    }
  11.    .S:before{
  12.      transform:rotate(18deg);
  13.      position:absolute;
  14.      content:'';
  15.      width:44px;
  16.      height:40px;
  17.      border-width:14px 0 15px 15.5px;
  18.      border-color:#ffaf80;
  19.      border-style:solid;
  20.      border-radius:220%0 0 150% /150%0 0 100%;
  21.    }
  22.    .S:after{
  23.     transform:rotate(198deg);
  24.     position:absolute;
  25.     content:'';
  26.     top:65px;
  27.     left:21px;
  28.     width:52px;
  29.     height:44px;
  30.     border-width:14px 0 15px 15px;
  31.     border-color:#ffaf80;
  32.     border-style:solid;
  33.     border-radius:240%0 0 110% /140%0 0 100%;
  34.     }

  1.    .T{
  2.       position:relative;
  3.       margin:10px 5px 10px 5px;
  4.       float: left;
  5.       top:12.5px;
  6.       left:10px;
  7.       width:100px;
  8.       height:125px;
  9.       border-top:solid 15px #ffd0e0;
  10.     }
  11.    .T:before{
  12.     position:absolute;
  13.     content:'';
  14.     top:0;
  15.     left:42px;
  16.     width:16px;
  17.     height:110px;
  18.     background-color:#ffd0e0;
  19.    }

  1.   .U{
  2.     position:relative;
  3.     margin:10px 5px 10px 5px;
  4.     float: left;
  5.     top:12.5px;
  6.     left:10px;
  7.     width:60px;
  8.     height:80px;
  9.     border-width:0 16px 0 16px;
  10.     border-color:#ff8f01;
  11.     border-style:solid;
  12.    }
  13.    .U:before{
  14.     position:absolute;
  15.     content:'';
  16.     top:65px;
  17.     left:-16px;
  18.     width:60px;
  19.     height:45px;
  20.     border-width:0 16px 15px 16px;
  21.     border-color:#ff8f01;
  22.     border-style:solid;
  23.     border-radius:0 0 200%200% /0 0 300%300%;
  24.    }

  1.   .V{
  2.      position:relative;
  3.      margin:10px 5px 10px 5px;
  4.      float: left;
  5.      top:12.5px;
  6.      left:30px;
  7.      width:59px;
  8.     }
  9.     .V:before{
  10.      transform:skew(18deg,0);
  11.      position:absolute;
  12.      content:'';
  13.      top:0;
  14.      left:0;
  15.      height:125px;
  16.      border-left:solid 16px #008800;
  17.    }
  18.    .V:after{
  19.      transform:skew(-18deg,0);
  20.      position:absolute;
  21.      content:'';
  22.      top:0;
  23.      right:0;
  24.      height:125px;
  25.      border-left:solid 16px #008800;
  26.    }

  1.    .W{
  2.      position:relative;
  3.      margin:10px 5px 10px 40px;
  4.      float: left;
  5.      top:12.5px;
  6.      left:25px;
  7.      width:100px;
  8.     }
  9.     .W:before{
  10.      transform:skew(11deg,0);
  11.      position:absolute;
  12.      content:'';
  13.      top:0;
  14.      left:0;
  15.      width:42px;
  16.      height:125px;
  17.      border-width:0 13px 0 15px;
  18.      border-color:#000000;
  19.      border-style:solid;
  20.     }
  21.     .W:after{
  22.      transform:skew(-11deg,0);
  23.      position:absolute;
  24.      content:'';
  25.      top:0;
  26.      right:0;
  27.      width:42px;
  28.      height:125px;
  29.      border-width:0 15px 0 13px;
  30.      border-color:#000000;
  31.      border-style:solid;
  32.     }

  1.   .X{
  2.      position:relative;
  3.      margin:10px 5px 10px 25px;
  4.      float: left;
  5.      top:12.5px;
  6.      left:50px;
  7.      width:16px;
  8.      height:125px;
  9.     }
  10.     .X:before{
  11.      transform:skew(32deg,0);
  12.      position:absolute;
  13.      content:'';
  14.      top:0;
  15.      left:0;
  16.      width:16px;
  17.      height:125px;
  18.      background-color:#0066ff;
  19.     }
  20.     .X:after{
  21.      transform:skew(-32deg,0);
  22.      position:absolute;
  23.      content:'';
  24.      top:0;
  25.      right:0;
  26.      width:16px;
  27.      height:125px;
  28.      background-color:#0066ff;
  29.     }


  1.   .Y{
  2.      position:relative;
  3.      margin:10px 5px 10px 80px;
  4.      float: left;
  5.      top:92.5px;
  6.      left:52px;
  7.      width:16px;
  8.      height:50px;
  9.      background-color:#22ff55;
  10.     }
  11.     .Y:before{
  12.      transform:skew(28deg,0);
  13.      position:absolute;
  14.      content:'';
  15.      top:-80px;
  16.      left:-21px;
  17.      width:16px;
  18.      height:80px;
  19.      background-color:#22ff55;
  20.     }
  21.     .Y:after{
  22.      transform:skew(-28deg,0);
  23.      position:absolute;
  24.      content:'';
  25.      top:-80px;
  26.      right:-21px;
  27.      width:16px;
  28.      height:80px;
  29.      background-color:#22ff55;
  30.     }


  1.   .Z{
  2.      position:relative;
  3.      margin:20px 5px 10px 80px;
  4.      float: left;
  5.      top:12.5px;
  6.      left:10px;
  7.      width:90px;
  8.      height:95px;
  9.      border-width:15px 0 15px 0;
  10.      border-color:#336699;
  11.      border-style:solid;
  12.     }
  13.     .Z:before{
  14.      transform:skew(-37deg,0);
  15.      position:absolute;
  16.      content:'';
  17.      top:0;
  18.      left:36px;
  19.      width:18px;
  20.      height:95px;
  21.      background-color:#336699;
  22.     }

完整的HTML5+CSS3版Demo。

效果截图：

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

以上就是如何使用纯CSS3绘制26个英文字母的示例详解的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！