用CSS画英文字母

浏览数：147 / 时间：2015年06月09日

起因是在网上看到了有人用纯css画出了英文字母，感觉不难，了解过css3的话都会感觉思路比较直观

主要用到的css知识点：绝对定位，圆角属性以及元素的宽高均为零时边框的挤压性质

效果图

技术分享

源代码

<!DOCTYPE html>
<html>
<head>
    <title>CSS-Letter</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .letter{
            position:relative;
            width:80px;
            height:100px;
            float:left;
            margin-left:20px;
        }
        .A-widget-one{
            width:0px;
            height:0px;
            border-bottom:100px solid #000;
            border-left:40px solid transparent;
            border-right:40px solid transparent;
            position:absolute;
            left:0px;
            top:0px;
        }
        .A-widget-two{
            width:0px;
            height:0px;
            border-bottom:63px solid #FFF;
            border-left:25px solid transparent;
            border-right:25px solid transparent;
            position:absolute;
            left:15px;
            bottom:0px;
        }
        .A-widget-three{
            width:32px;
            height:15px;
            background-color:#000;
            position:absolute;
            left:24px;
            top:62px;
        }
        .B-widget-one{
            width:15px;
            height:100px;
            background-color:#000;
            position:absolute;
            left:5px;
            top:0px;
        }
        .B-widget-two,.B-widget-three{
            width:60px;
            height:50px;
            background-color:#000;
            border-top-right-radius:45%;
            border-bottom-right-radius:45%;
            position:absolute;
            left:20px;
            top:0px;
        }
        .B-widget-three{
            top:50px;
        }
        .B-widget-four,.B-widget-five{
            width:40px;
            height:20px;
            background-color:#FFF;
            border-top-right-radius:45%;
            border-bottom-right-radius:45%;
            position:absolute;
            left:20px;
            top:15px;
        }
        .B-widget-five{
            top:65px;
        }
        .C-widget-one{
            width:80px;
            height:100px;
            background-color:#000;
            border-radius:45%;
        }
        .C-widget-two{
            width:40px;
            height:60px;
            background-color:#FFF;
            border-radius:45%;
            position:absolute;
            left:20px;
            top:20px;
        }
        .C-widget-three{
            width:22px;
            height:30px;
            background-color:#FFF;
            position:absolute;
            right:0px;
            top:35px;
        }
    </style>
</head>
<body>
    <div class="letter">
        <div class="A-widget-one"></div>
        <div class="A-widget-two"></div>
        <div class="A-widget-three"></div>
    </div>
    <div class="letter">
        <div class="B-widget-one"></div>
        <div class="B-widget-two"></div>
        <div class="B-widget-three"></div>
        <div class="B-widget-four"></div>
        <div class="B-widget-five"></div>
    </div>
    <div class="letter">
        <div class="C-widget-one"></div>
        <div class="C-widget-two"></div>
        <div class="C-widget-three"></div>
    </div>
</body>
</html>

利用css的圆角属性和绝对定位可以做很多有意思的东西，例如下面就是一个用css画出来的太极图

技术分享

代码

<!DOCTYPE html>
<html>
  <head>
    <title>css-taichi</title>
    <meta charset="utf-8"/>
    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
      .wrapper{
        width:300px;
        height:300px;
        margin:20px auto;
        border:1px solid #CDCDCD;
        position:relative;
      }
      .wrapper-circle{
        width:200px;
        height:200px;
        border-radius:50%;
        position:absolute;
        left:50px;
        top:50px;
        animation-name:rotary-taichi;
        animation-duration:3s;
        animation-iteration-count:infinite;
        animation-direction:alterlate;
      }
      .circle{
        width:100px;
        height:200px;
        position:absolute;
      }
      .left-circle{
        left:0;
        top:0;
        border-radius:200px 0 0 200px;
        background-color:#EBEBEB;
      }
      .right-circle{
        right:0;
        top:0;
        border-radius:0 200px 200px 0;
        background-color:#000;
      }
      .minor-circle{
        width:100px;
        height:100px;
        border-radius:50%;
        position:absolute;
        z-index:10;
      }
      .top-circle{
        right:-50px;
        top:0;
        background-color:#EBEBEB;
      }
      .bottom-circle{
        right:-50px;
        bottom:0;
        background-color:#000;
      }
      .tiny-circle{
        width:30px;
        height:30px;
        border-radius:50%;
        position:absolute;
        left:35px;
        top:35px;
        z-index:20;
      }
      .top-circle .tiny-circle{
        background-color:#000;
      }
      .bottom-circle .tiny-circle{
        background-color:#EBEBEB;
      }
      @keyframes rotary-taichi{
        transform-origin:50% 50%;
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
      }
    </style>
  </head>
<body>
  <div class="wrapper">
    <div class="wrapper-circle">
        <div class="left-circle circle">
          <div class="top-circle minor-circle">
            <div class="tiny-circle"></div>
          </div>
          <div class="bottom-circle minor-circle">
            <div class="tiny-circle"></div>
          </div>
        </div>
        <div class="right-circle circle">
        </div>
    </div>
  </div>
</body>
</html>