纯CSS3绘制26个英文字母

电玩女神 2022-07-29 09:24 201阅读 0赞

**纯CSS3绘制26个英文字母**

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

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

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

![SouthEast][]

.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;
        }

![SouthEast 1][]

.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;
         }

![SouthEast 2][]

.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;
         }

![SouthEast 3][]

.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;
          }

![SouthEast 4][]

.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;
          }

![SouthEast 5][]

.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;
          }

![SouthEast 6][]

.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;
          }

![SouthEast 7][]

.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;
           }

![SouthEast 8][]

.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;
           }

![SouthEast 9][]

.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;
            }

![SouthEast 10][]

.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;
           }

![SouthEast 11][]

.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;
           }

![SouthEast 12][]

.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;
           }

![SouthEast 13][]

.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;
          }

![SouthEast 14][]

.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%;
           }

![SouthEast 15][]

.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;
          }

![SouthEast 16][]

.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;
         }

![SouthEast 17][]

.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;
       }

![SouthEast 18][]

.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%;
        }

![SouthEast 19][]

.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;
       }

![SouthEast 20][]

.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%;
       }

![SouthEast 21][]

.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;
       }

![SouthEast 22][]

.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;
        }

![SouthEast 23][]

.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;
        }

![SouthEast 24][]

.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;
        }

![SouthEast 25][]

.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。

效果截图：

![SouthEast 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>
      
      <div id="A1" class="A"></div>
      
      <div id="B2" class="B"></div>
      
      <div id="C3" class="C"></div>
      
      <div id="D4" class="D"></div>
      
      <div id="E5" class="E"></div>
      
      <div id="F6" class="F"></div>
      
      <div id="G7" class="G"></div>
      
      <div id="H8" class="H"></div>
      
      <div id="I9" class="I"></div>
    
      
      <div style="clear:both">
    
      
      <div id="J10" class="J"></div>
      
      <div id="K11" class="K"></div>
      
      <div id="L12" class="L"></div>
      
      <div id="M13" class="M"></div>
      
      <div id="N14" class="N"></div>
      
      <div id="O15" class="O"></div>
      
      <div id="P16" class="P"></div>
      
      <div id="Q17" class="Q"></div>
      
      <div id="R18" class="R"></div>
    
      
      <div style="clear:both">
    
      
      <div id="S19" class="S"></div>
      
      <div id="T20" class="T"></div>
      
      <div id="U21" class="U"></div>
      
      <div id="V22" class="V"></div>
      
      <div id="W23" class="W"></div>
      
      <div id="X24" class="X"></div>
      
      <div id="Y25" class="Y"></div>
      
      <div id="Z26" class="Z"></div>
    </body>
    </html>

本文参考：[http://www.webhek.com/css-sans][http_www.webhek.com_css-sans]

[SouthEast]: /images/20220728/1d8531e602a54b4096686781717a37a4.png
[SouthEast 1]: /images/20220728/bd8bd0521f854129bab3ec519d15574b.png
[SouthEast 2]: /images/20220728/f54c0ab732f64d388f37ac50d64f26a5.png
[SouthEast 3]: /images/20220728/f0dcac6f24104a96a263d016654464a5.png
[SouthEast 4]: /images/20220728/3e85587991d243ed83e07a72f9985341.png
[SouthEast 5]: /images/20220728/2eeedd7911d74555b8a6b0e2286091a3.png
[SouthEast 6]: /images/20220728/38e8999571884038a677dbdeea40aef3.png
[SouthEast 7]: /images/20220728/3d032cdab321466099ab4b8b9f5109ae.png
[SouthEast 8]: /images/20220728/0ebacf264dee4c8ebb73547961eed361.png
[SouthEast 9]: /images/20220728/50f073f8a73a4454a801b007e0b0ddbb.png
[SouthEast 10]: /images/20220728/3d194afe13ca43e6b2f74c6b0e79a18f.png
[SouthEast 11]: /images/20220728/048e3568d4544854a2d577bd8ed8f245.png
[SouthEast 12]: /images/20220728/9a0d3224f58043fd9ebeb02b765f45b4.png
[SouthEast 13]: /images/20220728/f55af4cb1ff74382994f8b433a6d260a.png
[SouthEast 14]: /images/20220728/360df52cb17642bd987e4f806e4b52ac.png
[SouthEast 15]: /images/20220728/f02b7bd409534b8492e2aae33378f383.png
[SouthEast 16]: /images/20220728/59cd19ba996c42818a9d4d43990e6f1f.png
[SouthEast 17]: /images/20220728/9a0cc5b7b1634e9b878ea6cbd803c9bf.png
[SouthEast 18]: /images/20220728/3c7e26b469b84454a3087570b49ebba2.png
[SouthEast 19]: /images/20220728/05f0d20c5c87481ba749a6f4e7b59b40.png
[SouthEast 20]: /images/20220728/5a3c4b4c19754cefbbf2019ce29a3300.png
[SouthEast 21]: /images/20220728/716a1334cae846d6a63e8c4874c0ec73.png
[SouthEast 22]: /images/20220728/9ce4d7ba88cd42e184e0cfeaa2e74baf.png
[SouthEast 23]: /images/20220728/346311d81a1849e6ab64d0947cc20ca1.png
[SouthEast 24]: /images/20220728/afdf0f5eccb2431cab48619fb0279376.png
[SouthEast 25]: /images/20220728/658285c1efd5484e80a1a6df453913ad.png
[SouthEast 26]: /images/20220728/3b6da45ede944898aa8a1a0df02446ff.png
[http_www.webhek.com_css-sans]: http://www.webhek.com/css-sans