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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何使用纯CSS3绘制26个英文字母的示例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含20300字，纯文字阅读大概需要30分钟。

内容图文

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

纯CSS3绘制26个英文字母

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

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

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

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

   .A{
      position:relative;
      margin:10px 30px 10px 5px;  /*上右下左 */
      float: left;
      left:30px;
      width:60px;
      height:91px;
      border-bottom:solid 14px #0feee2;
    }
    .A:before{
      transform:skew(-19deg,0);
      position:absolute;
      content:'';
      top:12.5px;
      left:0;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }
    .A:after{
      transform:skew(19deg,0);
      position:absolute;
      content:'';
      top:12.5px;
      left:45px;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }

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

  .B{
      position:relative;
      margin:10px 20px 10px 30px;
      float: left;
      top:12.5px;
      left:10px;
      width:60px;
      height:125px;
      border-left:solid 16px #2056cd;
    }
    .B:before{
      position:absolute;
      content:'';
      width:52px;
      height:39px;
      border-width:15px 15px 10px 0;
      border-color:#2056cd;
      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:10px 15px 15px 0;
      border-color:#2056cd;
      border-style:solid;
      border-radius:0 180%220%0 /0 180%180%0;
     }

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

   .C{
       position:relative;
       margin:10px 5px 10px 10px;
       float: left;
       top:12.5px;
       left:10px;
       width:84px;
       height:95px;
       border-width:15px 12px 15px 16px;
       border-color:#87adef;
       border-style:solid;
       border-radius:50%;
     }
     .C:before{
       transform:rotate(45deg);
       position:absolute;
       content:'';
       top:2px;
       left:49px;
       width:90px;
       height:90px;
       background-color:#ffffff;
     }

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

  .D{
       position:relative;
       margin:10px 20px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       border-left:solid 15px #ade081;
       height:125px;
     }
     .D:before{
       position:absolute;
       content:'';
       top:0;
       left:0;
       width:60px;
       height:95px;
       border-width:15px 15px 15px 0;
       border-color:#ade081;
       border-style:solid;
       border-radius:0 300%300%0 /0 180%180%0;
      }

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

   .E{
        position:relative;
        margin:10px 10px 10px 60px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:95px;
        border-width:15px 0 15px 16px;
        border-color:#cd2388;
        border-style:solid;
      }
      .E:before{
        position:absolute;
        content:'';
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#cd2388;
      }

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

   .F{
        position:relative;
        margin:10px 5px 10px 10px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:15px 0 0 16px;
        border-color:#668899;
        border-style:solid;
       }
      .F:before{
        position:absolute;
        content:'';
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#668899;
      }

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

   .G{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:84px;
        height:95px;
        border-width:15px 12px 15px 16px;
        border-color:#f0af00;
        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:13px 14px 0 0;
        border-color:#f0af00;
        border-style:solid;
      }

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

   .H{
        position:relative;
        margin:10px 10px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:60px;
        height:125px;
        border-width:0 16px 0 16px;
        border-color:#cde680;
        border-style:solid;
       }
       .H:before{
        position:absolute;
        content:'';
        top:53px;
        left:0;
        width:60px;
        height:14px;
        background-color:#cde680;
       }

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

   .I{
        z-index:1;
        position:relative;
        margin:10px 10px 10px 10px;
        float: left;
        top:12.5px;
        left:20px;
        width:16px;
        height:125px;
        background-color:#020a0f;
       }

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

   .J{
         position:relative;
         margin:10px 5px 10px 5px;
         float: left;
         top:12.5px;
         left:-5px;
         width:75px;
         height:66px;
         border-right:solid 16px #b0c0d0;
      }
      .J:before{
         position:absolute;
         content:'';
         bottom:-60px;
         right:-16px;
         width:50px;
         height:60px;
         border-width:0 16px 15px 14px;
         border-color:#b0c0d0;
         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;
        }

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

   .K{
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:80px;
       height:125px;
       border-left:solid 16px #ce6688;
       overflow:hidden;
      }
      .K:before{
        transform:skew(-43deg,0);
        position:absolute;
        content:'';
        top:0;
        left:16px;
        width:19px;
        height:84px;
        background-color:#ce6688;
      }
      .K:after{
        transform:skew(30deg,0);
        position:absolute;
        content:'';
        bottom:0;
        right:25px;
        width:18px;
        height:80px;
        background-color:#ce6688;
       }

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

   .L{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:0 0 15px 16px;
        border-color:#998800;
        border-style:solid;
       }

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

   .M{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:80px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#ff0000;
        border-style:solid;
       }
       .M:before{
        transform:skew(20deg,0);
        position:absolute;
        content:'';
        top:0;
        left:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }
       .M:after{
        transform:skew(-20deg,0);
        position:absolute;
        content:'';
        top:0;
        right:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }

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

    .N{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#9aff02;
        border-style:solid;
       }
       .N:before{
        transform:skew(30deg,0);
        position:absolute;
        content:'';
        top:0;
        left:24px;
        width:15px;
        height:125px;
        background-color:#9aff02;
      }

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

   .O{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:70px;
        height:97px;
        border-width:14px 16px 14px 16px;
        border-color:#ffff40;
        border-style:solid;
        border-radius:55% /52%;
       }

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

    .P{
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:60px;
       height:125px;
       border-left:solid 16px #00ffff;
      }
      .P:before{
       position:absolute;
       content:'';
       width:56px;
       height:50px;
       border-width:13px 15px 13px 0;
       border-color:#00ffff;
       border-style:solid;
       border-radius:0 220%220%0 /0 180%180%0;
      }

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

   .Q {
       z-index:-1;
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:70px;
       height:97px;
       border-width:14px 16px 14px 16px;
       border-color:#deff00;
       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:16px 0 13px 13px;
       border-color:#deff00;
       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;
     }

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

   .R{
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     top:12.5px;
     left:10px;
     width:60px;
     height:125px;
     border-left:solid 16px #a0b0c0;
    }
    .R:before{
     position:absolute;
     content:'';
     width:52px;
     height:44px;
     border-width:13px 15px 13px 0;
     border-color:#a0b0c0;
     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:#a0b0c0;
   }

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

   .S{
     transform:rotate(14deg);
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     width:105px;
     height:150px;
     top:10px;
     left:10px;
   }
   .S:before{
     transform:rotate(18deg);
     position:absolute;
     content:'';
     width:44px;
     height:40px;
     border-width:14px 0 15px 15.5px;
     border-color:#ffaf80;
     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:14px 0 15px 15px;
    border-color:#ffaf80;
    border-style:solid;
    border-radius:240%0 0 110% /140%0 0 100%;
    }

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

   .T{
      position:relative;
      margin:10px 5px 10px 5px;
      float: left;
      top:12.5px;
      left:10px;
      width:100px;
      height:125px;
      border-top:solid 15px #ffd0e0;
    }
   .T:before{
    position:absolute;
    content:'';
    top:0;
    left:42px;
    width:16px;
    height:110px;
    background-color:#ffd0e0;
   }

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

  .U{
    position:relative;
    margin:10px 5px 10px 5px;
    float: left;
    top:12.5px;
    left:10px;
    width:60px;
    height:80px;
    border-width:0 16px 0 16px;
    border-color:#ff8f01;
    border-style:solid;
   }
   .U:before{
    position:absolute;
    content:'';
    top:65px;
    left:-16px;
    width:60px;
    height:45px;
    border-width:0 16px 15px 16px;
    border-color:#ff8f01;
    border-style:solid;
    border-radius:0 0 200%200% /0 0 300%300%;
   }

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

  .V{
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     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 #008800;
   }
   .V:after{
     transform:skew(-18deg,0);
     position:absolute;
     content:'';
     top:0;
     right:0;
     height:125px;
     border-left:solid 16px #008800;
   }

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

   .W{
     position:relative;
     margin:10px 5px 10px 40px;
     float: left;
     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 13px 0 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 15px 0 13px;
     border-color:#000000;
     border-style:solid;
    }

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

  .X{
     position:relative;
     margin:10px 5px 10px 25px;
     float: left;
     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:#0066ff;
    }
    .X:after{
     transform:skew(-32deg,0);
     position:absolute;
     content:'';
     top:0;
     right:0;
     width:16px;
     height:125px;
     background-color:#0066ff;
    }

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

  .Y{
     position:relative;
     margin:10px 5px 10px 80px;
     float: left;
     top:92.5px;
     left:52px;
     width:16px;
     height:50px;
     background-color:#22ff55;
    }
    .Y:before{
     transform:skew(28deg,0);
     position:absolute;
     content:'';
     top:-80px;
     left:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }
    .Y:after{
     transform:skew(-28deg,0);
     position:absolute;
     content:'';
     top:-80px;
     right:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }

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

  .Z{
     position:relative;
     margin:20px 5px 10px 80px;
     float: left;
     top:12.5px;
     left:10px;
     width:90px;
     height:95px;
     border-width:15px 0 15px 0;
     border-color:#336699;
     border-style:solid;
    }
    .Z:before{
     transform:skew(-37deg,0);
     position:absolute;
     content:'';
     top:0;
     left:36px;
     width:18px;
     height:95px;
     background-color:#336699;
    }

完整的HTML5+CSS3版Demo。

效果截图：

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3绘制26个字母</title>
  <style>
    .A{
      position:relative;
      margin:10px 30px 10px 5px;  /*上右下左 */
      float: left;
      left:30px;
      width:60px;
      height:91px;
      border-bottom:solid 14px #0feee2;
    }
    .A:before{
      transform:skew(-19deg,0);
      position:absolute;
      content:'';
      top:12.5px;
      left:0;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }
    .A:after{
      transform:skew(19deg,0);
      position:absolute;
      content:'';
      top:12.5px;
      left:45px;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }

    .B{
      position:relative;
      margin:10px 20px 10px 30px;
      float: left;
      top:12.5px;
      left:10px;
      width:60px;
      height:125px;
      border-left:solid 16px #2056cd;
    }
    .B:before{
      position:absolute;
      content:'';
      width:52px;
      height:39px;
      border-width:15px 15px 10px 0;
      border-color:#2056cd;
      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:10px 15px 15px 0;
      border-color:#2056cd;
      border-style:solid;
      border-radius:0 180%220%0 /0 180%180%0;
     }

     .C{
       position:relative;
       margin:10px 5px 10px 10px;
       float: left;
       top:12.5px;
       left:10px;
       width:84px;
       height:95px;
       border-width:15px 12px 15px 16px;
       border-color:#87adef;
       border-style:solid;
       border-radius:50%;
     }
     .C:before{
       transform:rotate(45deg);
       position:absolute;
       content:'';
       top:2px;
       left:49px;
       width:90px;
       height:90px;
       background-color:#ffffff;
     }

     .D{
       position:relative;
       margin:10px 20px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       border-left:solid 15px #ade081;
       height:125px;
     }
     .D:before{
       position:absolute;
       content:'';
       top:0;
       left:0;
       width:60px;
       height:95px;
       border-width:15px 15px 15px 0;
       border-color:#ade081;
       border-style:solid;
       border-radius:0 300%300%0 /0 180%180%0;
      }

     .E{
        position:relative;
        margin:10px 10px 10px 60px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:95px;
        border-width:15px 0 15px 16px;
        border-color:#cd2388;
        border-style:solid;
      }
      .E:before{
        position:absolute;
        content:'';
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#cd2388;
      }

      .F{
        position:relative;
        margin:10px 5px 10px 10px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:15px 0 0 16px;
        border-color:#668899;
        border-style:solid;
       }
      .F:before{
        position:absolute;
        content:'';
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#668899;
      }

      .G{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:84px;
        height:95px;
        border-width:15px 12px 15px 16px;
        border-color:#f0af00;
        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:13px 14px 0 0;
        border-color:#f0af00;
        border-style:solid;
      }

      .H{
        position:relative;
        margin:10px 10px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:60px;
        height:125px;
        border-width:0 16px 0 16px;
        border-color:#cde680;
        border-style:solid;
       }
       .H:before{
        position:absolute;
        content:'';
        top:53px;
        left:0;
        width:60px;
        height:14px;
        background-color:#cde680;
       }

       .I{
        z-index:1;
        position:relative;
        margin:10px 10px 10px 10px;
        float: left;
        top:12.5px;
        left:20px;
        width:16px;
        height:125px;
        background-color:#020a0f;
       }

      .J{
         position:relative;
         margin:10px 5px 10px 5px;
         float: left;
         top:12.5px;
         left:-5px;
         width:75px;
         height:66px;
         border-right:solid 16px #b0c0d0;
      }
      .J:before{
         position:absolute;
         content:'';
         bottom:-60px;
         right:-16px;
         width:50px;
         height:60px;
         border-width:0 16px 15px 14px;
         border-color:#b0c0d0;
         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;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:80px;
       height:125px;
       border-left:solid 16px #ce6688;
       overflow:hidden;
      }
      .K:before{
        transform:skew(-43deg,0);
        position:absolute;
        content:'';
        top:0;
        left:16px;
        width:19px;
        height:84px;
        background-color:#ce6688;
      }
      .K:after{
        transform:skew(30deg,0);
        position:absolute;
        content:'';
        bottom:0;
        right:25px;
        width:18px;
        height:80px;
        background-color:#ce6688;
       }

      .L{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:0 0 15px 16px;
        border-color:#998800;
        border-style:solid;
       }

       .M{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:80px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#ff0000;
        border-style:solid;
       }
       .M:before{
        transform:skew(20deg,0);
        position:absolute;
        content:'';
        top:0;
        left:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }
       .M:after{
        transform:skew(-20deg,0);
        position:absolute;
        content:'';
        top:0;
        right:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }

       .N{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#9aff02;
        border-style:solid;
       }
       .N:before{
        transform:skew(30deg,0);
        position:absolute;
        content:'';
        top:0;
        left:24px;
        width:15px;
        height:125px;
        background-color:#9aff02;
      }

      .O{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:70px;
        height:97px;
        border-width:14px 16px 14px 16px;
        border-color:#ffff40;
        border-style:solid;
        border-radius:55% /52%;
       }

      .P{
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:60px;
       height:125px;
       border-left:solid 16px #00ffff;
      }
      .P:before{
       position:absolute;
       content:'';
       width:56px;
       height:50px;
       border-width:13px 15px 13px 0;
       border-color:#00ffff;
       border-style:solid;
       border-radius:0 220%220%0 /0 180%180%0;
      }

      .Q {
       z-index:-1;
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:70px;
       height:97px;
       border-width:14px 16px 14px 16px;
       border-color:#deff00;
       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:16px 0 13px 13px;
       border-color:#deff00;
       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;
     margin:10px 5px 10px 5px;
     float: left;
     top:12.5px;
     left:10px;
     width:60px;
     height:125px;
     border-left:solid 16px #a0b0c0;
    }
    .R:before{
     position:absolute;
     content:'';
     width:52px;
     height:44px;
     border-width:13px 15px 13px 0;
     border-color:#a0b0c0;
     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:#a0b0c0;
   }

   .S{
     transform:rotate(14deg);
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     width:105px;
     height:150px;
     top:10px;
     left:10px;
   }
   .S:before{
     transform:rotate(18deg);
     position:absolute;
     content:'';
     width:44px;
     height:40px;
     border-width:14px 0 15px 15.5px;
     border-color:#ffaf80;
     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:14px 0 15px 15px;
    border-color:#ffaf80;
    border-style:solid;
    border-radius:240%0 0 110% /140%0 0 100%;
    }

    .T{
      position:relative;
      margin:10px 5px 10px 5px;
      float: left;
      top:12.5px;
      left:10px;
      width:100px;
      height:125px;
      border-top:solid 15px #ffd0e0;
    }
   .T:before{
    position:absolute;
    content:'';
    top:0;
    left:42px;
    width:16px;
    height:110px;
    background-color:#ffd0e0;
   }

   .U{
    position:relative;
    margin:10px 5px 10px 5px;
    float: left;
    top:12.5px;
    left:10px;
    width:60px;
    height:80px;
    border-width:0 16px 0 16px;
    border-color:#ff8f01;
    border-style:solid;
   }
   .U:before{
    position:absolute;
    content:'';
    top:65px;
    left:-16px;
    width:60px;
    height:45px;
    border-width:0 16px 15px 16px;
    border-color:#ff8f01;
    border-style:solid;
    border-radius:0 0 200%200% /0 0 300%300%;
   }

   .V{
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     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 #008800;
   }
   .V:after{
     transform:skew(-18deg,0);
     position:absolute;
     content:'';
     top:0;
     right:0;
     height:125px;
     border-left:solid 16px #008800;
   }

   .W{
     position:relative;
     margin:10px 5px 10px 40px;
     float: left;
     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 13px 0 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 15px 0 13px;
     border-color:#000000;
     border-style:solid;
    }

    .X{
     position:relative;
     margin:10px 5px 10px 25px;
     float: left;
     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:#0066ff;
    }
    .X:after{
     transform:skew(-32deg,0);
     position:absolute;
     content:'';
     top:0;
     right:0;
     width:16px;
     height:125px;
     background-color:#0066ff;
    }

    .Y{
     position:relative;
     margin:10px 5px 10px 80px;
     float: left;
     top:92.5px;
     left:52px;
     width:16px;
     height:50px;
     background-color:#22ff55;
    }
    .Y:before{
     transform:skew(28deg,0);
     position:absolute;
     content:'';
     top:-80px;
     left:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }
    .Y:after{
     transform:skew(-28deg,0);
     position:absolute;
     content:'';
     top:-80px;
     right:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }

    .Z{
     position:relative;
     margin:20px 5px 10px 80px;
     float: left;
     top:12.5px;
     left:10px;
     width:90px;
     height:95px;
     border-width:15px 0 15px 0;
     border-color:#336699;
     border-style:solid;
    }
    .Z:before{
     transform:skew(-37deg,0);
     position:absolute;
     content:'';
     top:0;
     left:36px;
     width:18px;
     height:95px;
     background-color:#336699;
    }
  </style>
</head>
<body>
  <!-- 字母A -->
  <p id="A1" class="A"></p>
  <!-- 字母B -->
  <p id="B2" class="B"></p>
  <!-- 字母C -->
  <p id="C3" class="C"></p>
  <!-- 字母D -->
  <p id="D4" class="D"></p>
  <!-- 字母E -->
  <p id="E5" class="E"></p>
  <!-- 字母F -->
  <p id="F6" class="F"></p>
  <!-- 字母G -->
  <p id="G7" class="G"></p>
  <!-- 字母H -->
  <p id="H8" class="H"></p>
  <!-- 字母I -->
  <p id="I9" class="I"></p>

  <!-- 浮动p换行 -->
  <p style="clear:both">

  <!-- 字母J -->
  <p id="J10" class="J"></p>
  <!-- 字母K -->
  <p id="K11" class="K"></p>
  <!-- 字母L -->
  <p id="L12" class="L"></p>
  <!-- 字母M -->
  <p id="M13" class="M"></p>
  <!-- 字母N -->
  <p id="N14" class="N"></p>
  <!-- 字母O -->
  <p id="O15" class="O"></p>
  <!-- 字母O -->
  <p id="P16" class="P"></p>
  <!-- 字母Q -->
  <p id="Q17" class="Q"></p>
  <!-- 字母R -->
  <p id="R18" class="R"></p>

  <!-- 浮动p换行 -->
  <p style="clear:both">

  <!-- 字母S -->
  <p id="S19" class="S"></p>
  <!-- 字母T -->
  <p id="T20" class="T"></p>
  <!-- 字母U -->
  <p id="U21" class="U"></p>
  <!-- 字母V -->
  <p id="V22" class="V"></p>
  <!-- 字母W -->
  <p id="W23" class="W"></p>
  <!-- 字母X -->
  <p id="X24" class="X"></p>
  <!-- 字母Y -->
  <p id="Y25" class="Y"></p>
  <!-- 字母Z -->
  <p id="Z26" class="Z"></p>
</body>
</html>

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

内容总结

以上是互联网集市为您收集整理的如何使用纯CSS3绘制26个英文字母的示例详解全部内容，希望文章能够帮你解决如何使用纯CSS3绘制26个英文字母的示例详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413188.html

来源：【匿名】

【上一篇】css3中关于box-shadow外阴影以及外发光的示例详解（图）【下一篇】如何使用CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

更多 ►

【如何使用纯CSS3绘制26个英文字母的示例详解】教程文章相关的互联网学习教程文章

CSS3动画效果回调处理详解

我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。1、transition对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：复制代码代码如下:<!DOCTYPE html>...

CSS3内容溢出详解

CSS3内容溢出属性在CSS中的每一个元素都视为一个盒子，这个盒子就是一个容器。容器就有大小之分，如果在样式中指定盒子的宽度与高度，可能某些内容在盒子中就会容不下，此时就可以使用overflow 属性来指定如何显示盒中容纳不下的内容。overflow 属性是CSS2.1规范中的特性，而在CSS3中增加了overflow-x和overflow-y 属性。overflow-x主要是用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切...

css3 object-fit详解【图】

上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。 object-fit理解CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。object-fit也是类似的，但还是有些差异，具体有5个值：.fill { object-fit: fill; }.contain { object-fit: contain; }.cover { object-fit: cover...

CSS3 结构伪类选择器详解

1 CSS3 结构伪类选择器1.E:root匹配E元素所在的根元素即：html2. E:nth-child(n)（1）匹配E元素的父元素中第n个子元素，（2）且该位置的子元素类型必须是E类型。否则无效p:nth-child(1){color:red}<div> <p>这是红色的<p></div> <div> <h1>这是第一个子元素但不是P类型，不是红色</h1> < p>这是黑色的注意对比 nth-of-type(1) </p></div> 3. E:nth-of-type(n)匹配E的父...

CSS3详解：background

CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。1、多个背景图片在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image....

css3中背景尺寸background-size详解

定义：规定背景图像的尺寸background-size的类型background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。浏览器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+JavaScript语法：object.style.backgroundSize="60px 80px"语法：background-...

css3中UI元素状态伪类选择器实例详解

这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...

如何使用css3实现字体内发光效果（详解）【图】

在互联网日益发展的当今社会，人们对于网页用户体验的要求越来越苛刻，这就催生了更多的特殊效果的衍生，比如阴影效果，发光效果等，那么本文将向大家介绍一下如何使用css3实现字体发光的特殊效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。使用css3实现字体发光效果原理首先我们要输入需要加入特效的文本。然后我们需要了解的是css3中本身没有发光特效的属性，但是我们可以通过text-shadow属性实现发光效果...

利用CSS3伪元素实现逐渐发光的方格边框实现详解【图】

这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...

css3中关于边框实例的详解【图】

CSS如何去掉html img图片边框你好，如果你的网页图片很多，要想都去掉边框，在css中统一写一行代码就可以了。<style> img{border:0;} </style>如果想单独去掉某1个img图片的边框，也可以单独定义。比如<div class="pic"><img src="图片地址" <a href="www.baidu.com/s?wd=alt&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y1uyN9ujNBn1NWm19Wnyc30ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bm...

Css3中word-wrap属性使用详解及实例

我们都知道，word-wrap 属性是CSS3的新属性，那么这篇文章就给大家详细讲解一下word-wrap属性怎么使用，以及使用的注意事项，下面来看一个小列子。1、定义word-wrap 属性允许长单词或 URL 地址换行到下一行。2、语法和参数word-wrap：normal（默认）|break-word normal：允许内容顶开指定的容器边界，如果单词超长，会冲出边界（在当前行显示，不会换行）。 break-word：内容将在边界内换行，当单词在当前行放不下时，会自动切换到...

HTML5/CSS3诱人的实例-模仿优酷视频截图功能的详解【图】

HTML5/CSS3 诱人的实例 -模仿优酷视频截图功能的详解：一般的视频网站对于用户上传的视频，在用户上传完成后，可以对播放的视频进行截图，然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验，而不是让用户额外上传一张展示图。效果图：看起来还是很不错，下面我给大家分析下，极其核心代码很简单：_canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = #ffffff; ...

基于CSS3animation的鼠标滑过按钮特效的实例详解【图】

简要教程　　这是一组使用CSS3 animation制作的鼠标滑过按钮动画特效。这组鼠标滑过按钮动画共有13最后效果，均由按钮的伪元素和CSS3 animation来制作完成。查看演示下载插件　　使用方法　　HTML结构　　该效果通过超链接来制作按钮，例如第一种Swipe效果的HTML代码为：<a class="btn-0" href="#">Swipe</a>　　CSS样式　　为了方便，特效中为除了<i>、<em>、<b>、<strong>和<span>之外的所有元素都添加了动画过渡效果。h...

CSS3中nth-child与nth-of-type的区别详解【图】

CSS3中nth-child与nth-of-type的区别其实很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。文字未免听起来比较晦涩，便于理解，这里附上一个小例子：<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>demo</title> </head> <style> .demo li:...

css3径向渐变详解之精确定义渐变的形状大小、添加多种终止颜色【图】

本篇文章给大家带来的内容是css3径向渐变详解之精确定义渐变的形状大小、添加多种终止颜色。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。定义明确的形状和大小在之前的文章【详解css3径向渐变如何定义中心和大小形状】中我们介绍定义渐变中心、使用关键字定义渐变形状与大小的方法，大家可以参考一下。但，有时我们需要更加精准的定义一个径向渐变的大小与形状，这就需要使用长度值或或百分比值来实现了。如...

CSS3 - 相关标签

css3按钮 css3动画 css3渐变 css3教程 css3新特性 css3旋转 css3选择器 css3阴影 css3圆角

CSS3 - 技术教程分类

CSS3 教程 CSS3 简介 CSS3 边框 CSS3 圆角 CSS3 背景 CSS3 渐变 CSS3 文本效果 CSS3 字体 CSS3 过渡 CSS3 动画 CSS3 多列 CSS3 用户界面 CSS3 图片 CSS3 按钮 CSS3 分页 CSS3 弹性盒子 CSS3 多媒体查询 css3 全部

CSS3 - 最新教程

CSS3 animaion 和 transition 比较 [HTML] CSS3 文本效果 css3边框样式 CSS3选择器的研究一篇文章带你了解CSS3 3D 转换知识 css3实现立方体，并且自转效果 css3实现图片遮罩效果鼠标hover以后出现...CSS3自定义Checkbox特效纯CSS3实现圆角效果（含IE兼容解决方法...Css3抖动

CSS3 - 最热教程

jQuery+HTML5+CSS3制作支持响应式布局时...如何使用css3实现3D的翻牌效果（附完整...css3如何实现进度条？css3中进度条的实...有关对CSS3媒体查询知识的总结 CSS3输入框阴影效果及其他阴影效果_htm...20种炫酷CSS3按钮鼠标滑过特效_html/cs...Css3制作变形与动画效果_表单特效 css3新特性有哪些关于CSS3的一些冷门属性_html/css_WEB-...css3中animation动画属性如何使用