순수 CSS3를 사용하여 영문자 26자를 그리는 방법의 자세한 예-CSS 튜토리얼-php.cn

순수 CSS3를 사용하여 영문자 26자를 그리는 방법의 자세한 예

黄舟

풀어 주다： 2017-07-22 10:03:46

원래의

2307명이 탐색했습니다.

여기에 보이는 26개의 표준 영어 글자는 일반적인 글꼴이 아닙니다. CSS를 사용한 빈 페이지. 주로 CSS3의 여러 가지 새로운 변환 기능을 사용하므로 이를 보려면 최신 브라우저를 사용해야 합니다.

웹페이지 코드(

)와 p 여백 설정 및 플로팅에 사용됩니다. (

여백:20px 5px 10px 80px; 부동: 왼쪽;). 여백의 4픽셀은 위쪽, 오른쪽, 아래쪽, 왼쪽을 나타냅니다. 다음은 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;
      }

로그인 후 복사

~ ~ ~ ~ ~

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

效果截图：