Detailed example of how to draw 26 English letters using pure CSS3-CSS Tutorial-php.cn

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

黄舟

Release： 2017-07-22 10:03:46

Original

2270 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:&#39;&#39;;
      top:12.5px;
      left:0;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }
    .A:after{
      transform:skew(19deg,0);
      position:absolute;
      content:&#39;&#39;;
      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:&#39;&#39;;
      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:&#39;&#39;;
      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:&#39;&#39;;
       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:&#39;&#39;;
       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:&#39;&#39;;
        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:&#39;&#39;;
        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:&#39;&#39;;
         top:2px;
         left:48px;
         background-color:#ffffff;
         width:90px;
         height:90px;
       }
      .G:after{
        position:absolute;
        content:&#39;&#39;;
        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:&#39;&#39;;
        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:&#39;&#39;;
         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:&#39;&#39;;
         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:&#39;&#39;;
     top:0;
     left:0;
     height:125px;
     border-left:solid 16px #008800;
   }
   .V:after{
     transform:skew(-18deg,0);
     position:absolute;
     content:&#39;&#39;;
     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:&#39;&#39;;
     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:&#39;&#39;;
     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:&#39;&#39;;
     top:0;
     left:0;
     width:16px;
     height:125px;
     background-color:#0066ff;
    }
    .X:after{
     transform:skew(-32deg,0);
     position:absolute;
     content:&#39;&#39;;
     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:&#39;&#39;;
     top:-80px;
     left:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }
    .Y:after{
     transform:skew(-28deg,0);
     position:absolute;
     content:&#39;&#39;;
     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:&#39;&#39;;
     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!