Detailed example of how to draw 26 English letters using pure CSS3

黄舟
Release: 2017-07-22 10:03:46
Original
2286 people have browsed it

                                                                                                                                                                                                                                   Pure CSS3 drawing 26 English letters

# Here you see the 26 The standard English letters are not ordinary fonts. They are drawn on a blank page using CSS, pure CSS works. It mainly uses multiple new transformation functions in CSS3, and you need to use the latest browser to view it.

##Used in the web page code (

) and p margin setting and float (margin:20px 5px 10px 80px; float: left; ). The four pixels of the margin represent: top, right, bottom, and left.

The following is the CSS for drawing 26 letters in alphabetical order.

   .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;
    }
Copy after login

  .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;
     }
Copy after login


   .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;
     }
Copy after login

  .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;
      }
Copy after login

   .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;
      }
Copy after login

      

   .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;
      }
Copy after login

                                                                                                                      

   .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;
      }
Copy after login

                                                                         

   .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;
       }
Copy after login
                                  

   .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;
       }
Copy after login
                                                                                                                                                                     

   .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;
        }
Copy after login
                                        

  .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;
   }
Copy after login

   .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;
    }
Copy after login

  .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;
    }
Copy after login


  .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;
    }
Copy after login


  .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;
    }
Copy after login

完整的HTML5+CSS3版Demo。

效果截图:




  
  CSS3绘制26个字母
  


  
  

Copy after login

The above is the detailed content of Detailed example of how to draw 26 English letters using pure CSS3. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!