The following numbers is made by CSS just for fun.

The CSS No.








  • 1
    2
    3
    4
    5
    6
    7
    .zero{
      width:70px;
      height:100px;
      border:15px solid #000;
      border-radius:60%/55%;
      margin:30px auto;
    }















  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .one{
      position:relative;
      left:17px;
      top:50px;
      width:0;
      height:130px;
      background:#000;
      margin:30px auto;
      border-right:15px solid #000;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .one:before{
      position:absolute;
      top:-58px;
      left:-43px;
      content:'';
      width:60px;
      height:80px;
      border-width:0 15px 12px 0;
      border-style:solid;
      border-color:#000;
      border-radius:0px 0px 100%;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    .one:after{
      position:absolute;
      op:-60px;
      left:-20px;
      content:'';
      width:60px;
      height:60px;
      background:#fff;
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .two{
      position:relative;
      top:20px;
      left:-10px;
      width:60px;
      height:95px;
      margin:30px auto;
      border-width:15px;
      border-style:solid;
      border-color:#000;
      border-radius:60%/55%;
      transform:rotate(42deg);
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .two:before{
      position:absolute;
      right:-15px;
      top:52px;
      content:'';
      width:120px;
      height:70px;
      border-right:15px solid #000;
      background:#fff;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .two:after{
      position:absolute;
      right:-84px;
      top:90px;
      content:'';
      width:90px;
      height:15px;
      background:#000;
      transform:rotate(-42deg);
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    .three{
      position:relative;
      top:15px;
      width:55px;
      height:43px;
      border-radius:50%;
      border:12px solid #000;
      margin:30px auto 100px;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .three:before{
      position:absolute;
      right:-24px;
      top:45px;
      content:'';
      width:75px;
      height:60px;
      border-radius:50%;
      border:12px solid #000;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    .three:after{
      position:absolute;
      left:-20px;
      top:23px;
      content:'';
      width:40px;
      height:55px;
      background:#fff;
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    .four{
      position:relative;
      top:15px;
      left:25px;
      width:0;
      height:140px;
      border-left:15px solid #000;
      margin:30px auto;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .four:before{
      position:absolute;
      left:-49px;
      top:0px;
      content:'';
      width:0;
      height:97px;
      border-left:15px solid #000;
      transform:skew(-35deg,0);
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    .four:after{
      position:absolute;
      left:-83px;
      top:97px;
      content:'';
      width:110px;
      height:15px;
      background:#000;
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .five{
      position:relative;
      top:20px;
      left:5px;
      width:55px;
      height:60px;
      border-width:15px 0 0 15px;
      border-style:solid;
      border-color:#000;
      margin:30px auto;
      transform:skew(-15deg,0);
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .five:before{
      position:absolute;
      left:-13px;
      top:30px;
      content:'';
      width:70px;
      height:70px;
      border:12px solid #000;
      border-radius:50%;
      transform:skew(15deg,0);
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    .five:after{
      position:absolute;
      left:-20px;
      top:60px;
      content:'';
      width:30px;
      height:30px;
      background:#fff;
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .six{
      position:relative;
      top:30px;
      width:70px;
      height:130px;
      border-width:15px 12px 0px 13px;
      border-style:solid;
      border-color:#000;
      border-radius:60% 50% 50% 50%/50% 30% 50% 50%;
      margin:30px auto;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .six:before{
      position:absolute;
      left:-10px;
      top:40px;
      z-index:2;
      content:'';
      width:70px;
      height:65px;
      border:13px solid #000;
      border-radius:50%;
      background:#fff;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .six:after{
      position:absolute;
      right:-15px;
      top:20px;
      z-index:1;
      content:'';
      border-style:solid solid dashed dashed;
      border-color:#fff #fff transparent transparent;
      border-width:25px;
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    .seven{
      position:relative;
      top:40px;
      width:80px;
      height:0;
      border-bottom:15px solid #000;
      margin:0px auto 140px;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .seven:before{
      position:absolute;
      right:10px;
      top:0px;
      content:'';
      width:0;
      height:130px;
      border-left:15px solid #000;
      transform:skew(-20deg,0);
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    .eight{
      position:relative;
      top:17px;
      width:55px;
      height:43px;
      border-radius:50%;
      border:12px solid #000;
      margin:30px auto 100px;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .eight:before{
      position:absolute;
      right:-24px;
      top:45px;
      content:'';
      width:75px;
      height:60px;
      border-radius:50%;
      border:12px solid #000;
    }











  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .nine{
      position:relative;
      top:30px;
      width:70px;
      height:130px;
      border-width:15px 12px 0px 13px;
      border-style:solid;
      border-color:#000;
      border-radius:60% 50% 50% 50%/50% 30% 50% 50%;
      margin:30px auto;
      transform:rotate(180deg);
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .nine:before{
      position:absolute;
      left:-10px;
      top:40px;
      z-index:2;
      content:'';
      width:70px;
      height:65px;
      border:13px solid #000;
      border-radius:50%;
      background:#fff;
    }




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .nine:after{
      position:absolute;
      right:-15px;
      top:20px;
      z-index:1;
      content:'';
      border-style:solid solid dashed dashed;
      border-color:#fff #fff transparent transparent;
      border-width:25px;
    }





Summary

  1. transform: skewX(angle);: 绕X轴以指定的角度倾斜
  2. transform: rotate(angle);: 按指定角度以顺时针旋转

  3. border-radius:










































    test code tips 



    1
    2
    3
    4
    5
    6
    7
    .radius-1 {
      width:200px;
      height:100px;
      background:#ccc;
      border:50px solid #000;
      border-radius:50px;
    }
    边框会影响 border-radius
    		 



    1
    2
    3
    4
    5
    6
    .radius-2 {
      width:200px;
      height:100px;
      background:#ccc;
      border-radius:50%;
    }
    border-radius:50%; 等同于 border-radius:100px/50px;
    即水平方向和垂直方向的圆弧半径分别是元素宽度和高度的50%
    		 



    1
    2
    3
    4
    5
    6
    .radius-3 {
      width:200px;
      height:100px;
      background:#ccc;
      border-radius:25px 5px 50px 100px;
    }
    左上角、右上角、右下角、左下角
    		 



    1
    2
    3
    4
    5
    6
    .radius-4 {
      width:200px;
      height:100px;
      background:#ccc;
      border-radius:100px 25px;
    }
    左上角、右下角 ; 右上角、左下角
    		 



    1
    2
    3
    4
    5
    6
    .radius-5 {
      width:200px;
      height:100px;
      background:#ccc;
      border-radius:100px 25px 5px;
    }
    左上角 ; 右上角、左下角 ; 右下角
    		 



    1
    2
    3
    4
    5
    6
    .radius-6 {
      width:200px;
      height:100px;
      background:#ccc;
      border-radius:100px 25px 10px/50px 25px;
    }

    • 左上角：100px 50px

    • 右上角：25px 25px

    • 右下角：10px 50px

    • 左下角：25px 25px

Reference lists

CSS SANS, http://yusugomori.com/projects/css-sans/
MDN, https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

Content

  1. The CSS No.
  2. Summary
  3. Reference lists