纯CSS绘制的图形一览

整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭，哈哈。。。仅仅是为了自己以后查看！

Square(正方形)

#square {

    width: 100px;

    height: 100px;

    background: red;

}

Rectangle(矩形)

#rectangle {

    width: 200px;

    height: 100px;

    background: red;

}

Circle(圆形)

#circle {

    width: 100px;

    height: 100px;

    background: red;

    -moz-border-radius: 50px;

    -webkit-border-radius: 50px;

    border-radius: 50px;

}

/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Oval(椭圆形)

#oval {

    width: 200px;

    height: 100px;

    background: red;

    -moz-border-radius: 100px / 50px;

    -webkit-border-radius: 100px / 50px;

    border-radius: 100px / 50px;

}

/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Triangle Up(向上的三角形)

#triangle-up {

    width:;

    height:;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

}

Triangle Down(向下)

#triangle-down {

    width:;

    height:;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

}

Triangle Left(向左)

#triangle-left {

    width:;

    height:;

    border-top: 50px solid transparent;

    border-right: 100px solid red;

    border-bottom: 50px solid transparent;

}

Triangle Right(向右)

#triangle-right {

    width:;

    height:;

    border-top: 50px solid transparent;

    border-left: 100px solid red;

    border-bottom: 50px solid transparent;

}

Triangle Top Left(左上)

#triangle-topleft {

    width:;

    height:;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}

Triangle Top Right(右上)

#triangle-topright {

    width:;

    height:;

    border-top: 100px solid red;

    border-left: 100px solid transparent;

}

Triangle Bottom Left(左下)

#triangle-bottomleft {

    width:;

    height:;

    border-bottom: 100px solid red;

    border-right: 100px solid transparent;

}

Triangle Bottom Right(右下)

#triangle-bottomright {

    width:;

    height:;

    border-bottom: 100px solid red;

    border-left: 100px solid transparent;

}

Curved Tail Arrow(弯尾箭头)

#curvedarrow {

  position: relative;

  width:;

  height:;

  border-top: 9px solid transparent;

  border-right: 9px solid red;

  -webkit-transform: rotate(10deg);

  -moz-transform: rotate(10deg);

  -ms-transform: rotate(10deg);

  -o-transform: rotate(10deg);

}

#curvedarrow:after {

  content: "";

  position: absolute;

  border: 0 solid transparent;

  border-top: 3px solid red;

  border-radius: 20px 0 0 0;

  top: -12px;

  left: -9px;

  width: 12px;

  height: 12px;

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

}

Trapezoid(梯形)

#trapezoid {

    border-bottom: 100px solid red;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    height:;

    width: 100px;

}

Parallelogram(平行四边形)

#parallelogram {

    width: 150px;

    height: 100px;

    -webkit-transform: skew(20deg);

       -moz-transform: skew(20deg);

         -o-transform: skew(20deg);

    background: red;

}

Star (6-points)(六角星)

#star-six {

    width:;

    height:;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

    position: relative;

}

#star-six:after {

    width:;

    height:;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

    position: absolute;

    content: "";

    top: 30px;

    left: -50px;

}

Star (5-points)(五角星)

#star-five {

   margin: 50px 0;

   position: relative;

   display: block;

   color: red;

   width: 0px;

   height: 0px;

   border-right:  100px solid transparent;

   border-bottom: 70px  solid red;

   border-left:   100px solid transparent;

   -moz-transform:    rotate(35deg);

   -webkit-transform: rotate(35deg);

   -ms-transform:     rotate(35deg);

   -o-transform:      rotate(35deg);

}

#star-five:before {

   border-bottom: 80px solid red;

   border-left: 30px solid transparent;

   border-right: 30px solid transparent;

   position: absolute;

   height:;

   width:;

   top: -45px;

   left: -65px;

   display: block;

   content: '';

   -webkit-transform: rotate(-35deg);

   -moz-transform:    rotate(-35deg);

   -ms-transform:     rotate(-35deg);

   -o-transform:      rotate(-35deg);

}

#star-five:after {

   position: absolute;

   display: block;

   color: red;

   top: 3px;

   left: -105px;

   width: 0px;

   height: 0px;

   border-right: 100px solid transparent;

   border-bottom: 70px solid red;

   border-left: 100px solid transparent;

   -webkit-transform: rotate(-70deg);

   -moz-transform:    rotate(-70deg);

   -ms-transform:     rotate(-70deg);

   -o-transform:      rotate(-70deg);

   content: '';

}

Pentagon(五边形)

#pentagon {

    position: relative;

    width: 54px;

    border-width: 50px 18px 0;

    border-style: solid;

    border-color: red transparent;

}

#pentagon:before {

    content: "";

    position: absolute;

    height:;

    width:;

    top: -85px;

    left: -18px;

    border-width: 0 45px 35px;

    border-style: solid;

    border-color: transparent transparent red;

}

Hexagon(六边形)

#hexagon {

    width: 100px;

    height: 55px;

    background: red;

    position: relative;

}

#hexagon:before {

    content: "";

    position: absolute;

    top: -25px;

    left:;

    width:;

    height:;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 25px solid red;

}

#hexagon:after {

    content: "";

    position: absolute;

    bottom: -25px;

    left:;

    width:;

    height:;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 25px solid red;

}

Octagon(八边形)

#octagon {

    width: 100px;

    height: 100px;

    background: red;

    position: relative;

}

#octagon:before {

    content: "";

    position: absolute;

    top:;

    left:;

    border-bottom: 29px solid red;

    border-left: 29px solid #fff;

    border-right: 29px solid #fff;

    width: 42px;

    height:;

}

#octagon:after {

    content: "";

    position: absolute;

    bottom:;

    left:;

    border-top: 29px solid red;

    border-left: 29px solid #fff;

    border-right: 29px solid #fff;

    width: 42px;

    height:;

}

Heart(心形)

#heart {

    position: relative;

    width: 100px;

    height: 90px;

}

#heart:before,

#heart:after {

    position: absolute;

    content: "";

    left: 50px;

    top:;

    width: 50px;

    height: 80px;

    background: red;

    -moz-border-radius: 50px 50px 0 0;

    border-radius: 50px 50px 0 0;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;

       -moz-transform-origin: 0 100%;

        -ms-transform-origin: 0 100%;

         -o-transform-origin: 0 100%;

            transform-origin: 0 100%;

}

#heart:after {

    left:;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-transform-origin: 100% 100%;

       -moz-transform-origin: 100% 100%;

        -ms-transform-origin: 100% 100%;

         -o-transform-origin: 100% 100%;

            transform-origin :100% 100%;

}

Infinity(无限符图形)

#infinity {

    position: relative;

    width: 212px;

    height: 100px;

}

#infinity:before,

#infinity:after {

    content: "";

    position: absolute;

    top:;

    left:;

    width: 60px;

    height: 60px;

    border: 20px solid red;

    -moz-border-radius: 50px 50px 0 50px;

         border-radius: 50px 50px 0 50px;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

}

#infinity:after {

    left: auto;

    right:;

    -moz-border-radius: 50px 50px 50px 0;

         border-radius: 50px 50px 50px 0;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

}

Diamond Square(菱形)

#diamond {

    width:;

    height:;

    border: 50px solid transparent;

    border-bottom-color: red;

    position: relative;

    top: -50px;

}

#diamond:after {

    content: '';

    position: absolute;

    left: -50px;

    top: 50px;

    width:;

    height:;

    border: 50px solid transparent;

    border-top-color: red;

}

Diamond Shield（钻石盾牌）

#diamond-shield {

    width:;

    height:;

    border: 50px solid transparent;

    border-bottom: 20px solid red;

    position: relative;

    top: -50px;

}

#diamond-shield:after {

    content: '';

    position: absolute;

    left: -50px; top: 20px;

    width:;

    height:;

    border: 50px solid transparent;

    border-top: 70px solid red;

}

Diamond Narrow

#diamond-narrow {

    width:;

    height:;

    border: 50px solid transparent;

    border-bottom: 70px solid red;

    position: relative;

    top: -50px;

}

#diamond-narrow:after {

    content: '';

    position: absolute;

    left: -50px; top: 70px;

    width:;

    height:;

    border: 50px solid transparent;

    border-top: 70px solid red;

}

Cut Diamond(砖石形)

#cut-diamond {

    border-style: solid;

    border-color: transparent transparent red transparent;

    border-width: 0 25px 25px 25px;

    height:;

    width: 50px;

    position: relative;

    margin: 20px 0 50px 0;

}

#cut-diamond:after {

    content: "";

    position: absolute;

    top: 25px;

    left: -25px;

    width:;

    height:;

    border-style: solid;

    border-color: red transparent transparent transparent;

    border-width: 70px 50px 0 50px;

}

Egg(鸡蛋)

#egg {

   display:block;

   width: 126px;

   height: 180px;

   background-color: red;

   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;

}

Pac-Man(吃豆人)

#pacman {

  width: 0px;

  height: 0px;

  border-right: 60px solid transparent;

  border-top: 60px solid red;

  border-left: 60px solid red;

  border-bottom: 60px solid red;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  border-bottom-left-radius: 60px;

  border-bottom-right-radius: 60px;

}

Talk Bubble（聊天框）

#talkbubble {

   width: 120px;

   height: 80px;

   background: red;

   position: relative;

   -moz-border-radius:    10px;

   -webkit-border-radius: 10px;

   border-radius:         10px;

}

#talkbubble:before {

   content:"";

   position: absolute;

   right: 100%;

   top: 26px;

   width:;

   height:;

   border-top: 13px solid transparent;

   border-right: 26px solid red;

   border-bottom: 13px solid transparent;

}

12 Point Burst（爆炸形状）

#burst-12 {

    background: red;

    width: 80px;

    height: 80px;

    position: relative;

    text-align: center;

}

#burst-12:before, #burst-12:after {

    content: "";

    position: absolute;

    top:;

    left:;

    height: 80px;

    width: 80px;

    background: red;

}

#burst-12:before {

    -webkit-transform: rotate(30deg);

       -moz-transform: rotate(30deg);

        -ms-transform: rotate(30deg);

         -o-transform: rotate(30deg);

}

#burst-12:after {

    -webkit-transform: rotate(60deg);

       -moz-transform: rotate(60deg);

        -ms-transform: rotate(60deg);

         -o-transform: rotate(60deg);

}

Yin Yang(阴阳八卦)

#yin-yang {

    width: 96px;

    height: 48px;

    background: #eee;

    border-color: red;

    border-style: solid;

    border-width: 2px 2px 50px 2px;

    border-radius: 100%;

    position: relative;

}

#yin-yang:before {

    content: "";

    position: absolute;

    top: 50%;

    left:;

    background: #eee;

    border: 18px solid red;

    border-radius: 100%;

    width: 12px;

    height: 12px;

}

#yin-yang:after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    background: red;

    border: 18px solid #eee;

    border-radius:100%;

    width: 12px;

    height: 12px;

}

Badge Ribbon(徽章丝带)

#badge-ribbon {

 position: relative;

 background: red;

 height: 100px;

 width: 100px;

 -moz-border-radius:    50px;

 -webkit-border-radius: 50px;

 border-radius:         50px;

}

#badge-ribbon:before,

#badge-ribbon:after {

  content: '';

  position: absolute;

  border-bottom: 70px solid red;

  border-left: 40px solid transparent;

  border-right: 40px solid transparent;

  top: 70px;

  left: -10px;

  -webkit-transform: rotate(-140deg);

  -moz-transform:    rotate(-140deg);

  -ms-transform:     rotate(-140deg);

  -o-transform:      rotate(-140deg);

}

#badge-ribbon:after {

  left: auto;

  right: -10px;

  -webkit-transform: rotate(140deg);

  -moz-transform:    rotate(140deg);

  -ms-transform:     rotate(140deg);

  -o-transform:      rotate(140deg);

}

Space Invader（太空入侵者）

#space-invader{

  box-shadow:

    0 0 0 1em red,

    0 1em 0 1em red,

    -2.5em 1.5em 0 .5em red,

    2.5em 1.5em 0 .5em red,

    -3em -3em 0 0 red,

    3em -3em 0 0 red,

    -2em -2em 0 0 red,

    2em -2em 0 0 red,

    -3em -1em 0 0 red,

    -2em -1em 0 0 red,

    2em -1em 0 0 red,

    3em -1em 0 0 red,

    -4em 0 0 0 red,

    -3em 0 0 0 red,

    3em 0 0 0 red,

    4em 0 0 0 red,

    -5em 1em 0 0 red,

    -4em 1em 0 0 red,

    4em 1em 0 0 red,

    5em 1em 0 0 red,

    -5em 2em 0 0 red,

    5em 2em 0 0 red,

    -5em 3em 0 0 red,

    -3em 3em 0 0 red,

    3em 3em 0 0 red,

    5em 3em 0 0 red,

    -2em 4em 0 0 red,

    -1em 4em 0 0 red,

    1em 4em 0 0 red,

    2em 4em 0 0 red;

    background: red;

    width: 1em;

    height: 1em;

    overflow: hidden;

    margin: 50px 0 70px 65px;

  }

TV Screen（电视屏幕）

#tv {

  position: relative;

  width: 200px;

  height: 150px;

  margin: 20px 0;

  background: red;

  border-radius: 50% / 10%;

  color: white;

  text-align: center;

  text-indent: .1em;

}

#tv:before {

  content: '';

  position: absolute;

  top: 10%;

  bottom: 10%;

  right: -5%;

  left: -5%;

  background: inherit;

  border-radius: 5% / 50%;

}

Chevron（雪佛龙）

#chevron {

  position: relative;

  text-align: center;

  padding: 12px;

  margin-bottom: 6px;

  height: 60px;

  width: 200px;

}

#chevron:before {

  content: '';

  position: absolute;

  top:;

  left:;

  height: 100%;

  width: 51%;

  background: red;

  -webkit-transform: skew(0deg, 6deg);

  -moz-transform: skew(0deg, 6deg);

  -ms-transform: skew(0deg, 6deg);

  -o-transform: skew(0deg, 6deg);

  transform: skew(0deg, 6deg);

}

#chevron:after {

  content: '';

  position: absolute;

  top:;

  right:;

  height: 100%;

  width: 50%;

  background: red;

  -webkit-transform: skew(0deg, -6deg);

  -moz-transform: skew(0deg, -6deg);

  -ms-transform: skew(0deg, -6deg);

  -o-transform: skew(0deg, -6deg);

  transform: skew(0deg, -6deg);

}

Magnifying Glass（放大镜）

#magnifying-glass{

 font-size: 10em; /* This controls the size. */

 display: inline-block;

 width: 0.4em;

 height: 0.4em;

 border: 0.1em solid red;

 position: relative;

 border-radius: 0.35em;

}

#magnifying-glass::before{

 content: "";

 display: inline-block;

 position: absolute;

 right: -0.25em;

 bottom: -0.1em;

 border-width:;

 background: red;

 width: 0.35em;

 height: 0.08em;

 -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

     -ms-transform: rotate(45deg);

      -o-transform: rotate(45deg);

}

Facebook Icon（Facebook图标）

#facebook-icon {

  background: red;

  text-indent: -999em;

  width: 100px;

  height: 110px;

  border-radius: 5px;

  position: relative;

  overflow: hidden;

  border: 15px solid red;

  border-bottom:;

}

#facebook-icon::before {

  content: "/20";

  position: absolute;

  background: red;

  width: 40px;

  height: 90px;

  bottom: -30px;

  right: -37px;

  border: 20px solid #eee;

  border-radius: 25px;

}

#facebook-icon::after {

  content: "/20";

  position: absolute;

  width: 55px;

  top: 50px;

  height: 20px;

  background: #eee;

  right: 5px;

}

Cone(圆锥形)

#cone {

  width:;

  height:;

  border-left: 70px solid transparent;

  border-right: 70px solid transparent;

  border-top: 100px solid red;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;

  border-radius: 50%;

}

Moon(月亮)

#moon {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  box-shadow: 15px 15px 0 0 red;

}

Cross（十字架）

#cross {

  background: red;

  height: 100px;

  position: relative;

  width: 20px;

}

#cross:after {

  background: red;

  content: "";

  height: 20px;

  left: -40px;

  position: absolute;

  top: 40px;

  width: 100px;

}

纯CSS绘制的图形一览的更多相关文章

摘记史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
史上最强大的40多个纯CSS绘制的图形[转]
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

随机推荐

thinkphp5.0 验证提示信息的类型
以上是5.0.12版本下面是5.0.5版本,没有elseif 上图中红方格的值只能是string类型,但是这种情况是在5.0.5版本是可以设置为array类型的
thinkphp5.0 空模块、空控制器、空方法
空模块 'exception_handle' => function(Exception $e){ // 参数验证错误 if ($e instanceof \think\exception\Va ...
HZOJ Blue
Blue: 贪心. 我们不妨给蛤定一个先后顺序,则贪心策略即从右至左每只蛤依次往最远的石子跳. 证明: 如果最右的蛤不往最远的石子跳,而是选择了一个较近的石子,那么必然会存在一个该蛤左边的蛤越过了它跳 ...
Resharper 如何把类里的类移动到其他文件
有时候,看到一个类里有很多类,需要把他移动其他文件假如有一个类 class A { class B { } } 如何把 B 移动文件 B里? 一般使用快捷键是 Resharper 的快捷键,如果不 ...
oracle函数 TRANSLATE(c1,c2,c3)
[功能]将字符表达式值中,指定字符替换为新字符 [说明]多字节符(汉字.全角符等),按1个字符计算 [参数] c1 希望被替换的字符或变量 c2 查询原始的字符集 c3 替换新的字符集,将 ...
linux下修改gcc编译器版本
可以使用如下命令行来让 gcc 选择不同的 C++ 版本: g++ -std=c++11 main.cpp 在你的系统中,由于编译器或是编译器设定上的差别,操作也许有所不同.
「BZOJ3505」[CQOI2014] 数三角形
「BZOJ3505」[CQOI2014] 数三角形这道题直接求不好做,考虑容斥,首先选出3个点不考虑是否合法的方案数为$C_{(n+1)*(m+1)}^{3}$,然后减去三点一线的个数就好了.显然不 ...
AtCoder Regular Contest 058
这个应该是第一场有英文的atcoder吧??不过题解却没有英文的... 从前往后慢慢做... C こだわり者いろはちゃん / Iroha's Obsession 数据范围这么小,直接暴力 #inclu ...
python selenium 测试浏览器(IE,FF,Chrome)
browser_engine.py # coding=utf-8 from selenium import webdriver class BrowserEngine(object): "& ...
POJ2186 Popular Cows 题解强连通分量入门题
题目链接:http://poj.org/problem?id=2186 题目大意: 每头牛都想成为牛群中的红人. 给定N头牛的牛群和M个有序对(A, B),(A, B)表示牛A认为牛B是红人: 该关系 ...

纯CSS绘制的图形一览

Square(正方形)

Rectangle(矩形)

Circle(圆形)

Oval(椭圆形)

Triangle Up(向上的三角形)

Triangle Down(向下)

Triangle Left(向左)

Triangle Right(向右)

Triangle Top Left(左上)

Triangle Top Right(右上)

Triangle Bottom Left(左下)

Triangle Bottom Right(右下)

Curved Tail Arrow(弯尾箭头)

Trapezoid(梯形)

Parallelogram(平行四边形)

Star (6-points)(六角星)

Star (5-points)(五角星)

Pentagon(五边形)

Hexagon(六边形)

Octagon(八边形)

Heart(心形)

Infinity(无限符图形)

Diamond Square(菱形)

Diamond Shield（钻石盾牌）

Diamond Narrow

Cut Diamond(砖石形)

Egg(鸡蛋)

Pac-Man(吃豆人)

Talk Bubble（聊天框）

12 Point Burst（爆炸形状）

Yin Yang(阴阳八卦)

Badge Ribbon(徽章丝带)

Space Invader（太空入侵者）

TV Screen（电视屏幕）

Chevron（雪佛龙）

Magnifying Glass（放大镜）

Facebook Icon（Facebook图标）

Cone(圆锥形)

Moon(月亮)

Cross（十字架）

纯CSS绘制的图形一览的更多相关文章

随机推荐

热门专题