如何使用纯CSS3绘制26个英文字母的示例详解-css教程-PHP中文网

首页

web前端

css教程

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

黄舟

Jul 22, 2017 am 10:03 AM

csscss3

纯CSS3绘制26个英文字母

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

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

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

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

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

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

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

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

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

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

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

   .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:&#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;
        }

   .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:&#39;&#39;;
        top:0;
        left:16px;
        width:19px;
        height:84px;
        background-color:#ce6688;
      }
      .K:after{
        transform:skew(30deg,0);
        position:absolute;
        content:&#39;&#39;;
        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:&#39;&#39;;
        top:0;
        left:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }
       .M:after{
        transform:skew(-20deg,0);
        position:absolute;
        content:&#39;&#39;;
        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:&#39;&#39;;
        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:&#39;&#39;;
       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:&#39;&#39;;
       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:&#39;&#39;;
       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:&#39;&#39;;
     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:&#39;&#39;;
     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:&#39;&#39;;
     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:&#39;&#39;;
    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:&#39;&#39;;
    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:&#39;&#39;;
    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:&#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;
   }

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

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

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

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

完整的HTML5+CSS3版Demo。

效果截图：

CSS3绘制26个字母

以上是如何使用纯CSS3绘制26个英文字母的示例详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

' CSS4”更新Apr 11, 2025 pm 12:05 PM

自从我第一次介绍了CSS4面中的事情以来，就已经进行了更多的讨论。我将在这里从其他人那里汇集我最喜欢的想法。有

三种代码Apr 11, 2025 pm 12:02 PM

每次启动一个新项目时，我都会将我正在查看的代码分为三种类型，或者如果您愿意的话。我认为这些类型可以应用于

https很容易！Apr 11, 2025 am 11:51 AM

我对公开哀悼HTTPS的复杂性感到内gui。过去，我从第三方供应商那里购买了SSL证书，并且遇到了麻烦

HTML数据属性指南Apr 11, 2025 am 11:50 AM

您想了解的有关HTML，CSS和JavaScript中数据属性的所有信息。

了解JavaScript中的不变性Apr 11, 2025 am 11:47 AM

如果您以前从未在JavaScript中使用不变性，则可能会发现很容易将其与为新值或重新分配分配变量的混淆。

具有现代CSS功能的定制样式表单输入Apr 11, 2025 am 11:45 AM

如今，可以在语义上且易于访问的同时构建自定义的复选框，无线电按钮和切换开关。我们甚至不需要

脚注字符Apr 11, 2025 am 11:34 AM

有特殊的超级数字字符有时非常适合脚注。他们在这里：

如何使用HTML，CSS和JavaScript创建动画倒计时计时器Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然访问插件，但实际上更多

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

记事本++7.3.1

好用且免费的代码编辑器

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。