首页 » 前端开发 » 正文

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。

Square(正方形)

<span class="hljs-selector-id">#square</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">background</span>: red;
}

Rectangle(矩形)

<span class="hljs-selector-id">#rectangle</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">background</span>: red;
}

Circle(圆形)

<span class="hljs-selector-id">#circle</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">-moz-border-radius</span>: <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">-webkit-border-radius</span>: <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50px</span>;
}

<span class="hljs-comment">/* 可以使用百分比值(大于50%),但是低版本的Android不支持 */</span>

Oval(椭圆形)

<span class="hljs-selector-id">#oval</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">-moz-border-radius</span>: <span class="hljs-number">100px</span> / <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">-webkit-border-radius</span>: <span class="hljs-number">100px</span> / <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">100px</span> / <span class="hljs-number">50px</span>;
}

<span class="hljs-comment">/* 可以使用百分比值(大于50%),但是低版本的Android不支持 */</span>

Triangle Up(向上的三角形)

<span class="hljs-selector-id">#triangle-up</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">100px</span> solid red;
}

Triangle Down(向下)

<span class="hljs-selector-id">#triangle-down</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">100px</span> solid red;
}

Triangle Left(向左)

<span class="hljs-selector-id">#triangle-left</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">50px</span> solid transparent;
}

Triangle Right(向右)

<span class="hljs-selector-id">#triangle-right</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">50px</span> solid transparent;
}

Triangle Top Left(左上)

<span class="hljs-selector-id">#triangle-topleft</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">100px</span> solid transparent;
}

Triangle Top Right(右上)

<span class="hljs-selector-id">#triangle-topright</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">100px</span> solid transparent;
}

Triangle Bottom Left(左下)

<span class="hljs-selector-id">#triangle-bottomleft</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">100px</span> solid transparent;
}

Triangle Bottom Right(右下)

<span class="hljs-selector-id">#triangle-bottomright</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">100px</span> solid transparent;
}

Curved Tail Arrow(弯尾箭头)

<span class="hljs-selector-id">#curvedarrow</span> {
  <span class="hljs-attribute">position</span>: relative;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">border-top</span>: <span class="hljs-number">9px</span> solid transparent;
  <span class="hljs-attribute">border-right</span>: <span class="hljs-number">9px</span> solid red;
  <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(10deg);
  <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(10deg);
  <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(10deg);
  <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(10deg);
}
<span class="hljs-selector-id">#curvedarrow</span><span class="hljs-selector-pseudo">:after</span> {
  <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">0</span> solid transparent;
  <span class="hljs-attribute">border-top</span>: <span class="hljs-number">3px</span> solid red;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">20px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
  <span class="hljs-attribute">top</span>: -<span class="hljs-number">12px</span>;
  <span class="hljs-attribute">left</span>: -<span class="hljs-number">9px</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">12px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">12px</span>;
  <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
  <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
  <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
  <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
}

Trapezoid(梯形)

<span class="hljs-selector-id">#trapezoid</span> {
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
}

Parallelogram(平行四边形)

<span class="hljs-selector-id">#parallelogram</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">skew</span>(20deg);
       <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">skew</span>(20deg);
         <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">skew</span>(20deg);
    <span class="hljs-attribute">background</span>: red;
}

Star (6-points)(六角星)

<span class="hljs-selector-id">#star-six</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">position</span>: relative;
}
<span class="hljs-selector-id">#star-six</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">100px</span> solid red;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">30px</span>;
    <span class="hljs-attribute">left</span>: -<span class="hljs-number">50px</span>;
}

Star (5-points)(五角星)

<span class="hljs-selector-id">#star-five</span> {
   <span class="hljs-attribute">margin</span>: <span class="hljs-number">50px</span> <span class="hljs-number">0</span>;
   <span class="hljs-attribute">position</span>: relative;
   <span class="hljs-attribute">display</span>: block;
   <span class="hljs-attribute">color</span>: red;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">0px</span>;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">0px</span>;
   <span class="hljs-attribute">border-right</span>:  <span class="hljs-number">100px</span> solid transparent;
   <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">70px</span>  solid red;
   <span class="hljs-attribute">border-left</span>:   <span class="hljs-number">100px</span> solid transparent;
   <span class="hljs-attribute">-moz-transform</span>:    <span class="hljs-built_in">rotate</span>(35deg);
   <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(35deg);
   <span class="hljs-attribute">-ms-transform</span>:     <span class="hljs-built_in">rotate</span>(35deg);
   <span class="hljs-attribute">-o-transform</span>:      <span class="hljs-built_in">rotate</span>(35deg);
}
<span class="hljs-selector-id">#star-five</span><span class="hljs-selector-pseudo">:before</span> {
   <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">80px</span> solid red;
   <span class="hljs-attribute">border-left</span>: <span class="hljs-number">30px</span> solid transparent;
   <span class="hljs-attribute">border-right</span>: <span class="hljs-number">30px</span> solid transparent;
   <span class="hljs-attribute">position</span>: absolute;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
   <span class="hljs-attribute">top</span>: -<span class="hljs-number">45px</span>;
   <span class="hljs-attribute">left</span>: -<span class="hljs-number">65px</span>;
   <span class="hljs-attribute">display</span>: block;
   <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
   <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(-35deg);
   <span class="hljs-attribute">-moz-transform</span>:    <span class="hljs-built_in">rotate</span>(-35deg);
   <span class="hljs-attribute">-ms-transform</span>:     <span class="hljs-built_in">rotate</span>(-35deg);
   <span class="hljs-attribute">-o-transform</span>:      <span class="hljs-built_in">rotate</span>(-35deg);

}
<span class="hljs-selector-id">#star-five</span><span class="hljs-selector-pseudo">:after</span> {
   <span class="hljs-attribute">position</span>: absolute;
   <span class="hljs-attribute">display</span>: block;
   <span class="hljs-attribute">color</span>: red;
   <span class="hljs-attribute">top</span>: <span class="hljs-number">3px</span>;
   <span class="hljs-attribute">left</span>: -<span class="hljs-number">105px</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">0px</span>;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">0px</span>;
   <span class="hljs-attribute">border-right</span>: <span class="hljs-number">100px</span> solid transparent;
   <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">70px</span> solid red;
   <span class="hljs-attribute">border-left</span>: <span class="hljs-number">100px</span> solid transparent;
   <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(-70deg);
   <span class="hljs-attribute">-moz-transform</span>:    <span class="hljs-built_in">rotate</span>(-70deg);
   <span class="hljs-attribute">-ms-transform</span>:     <span class="hljs-built_in">rotate</span>(-70deg);
   <span class="hljs-attribute">-o-transform</span>:      <span class="hljs-built_in">rotate</span>(-70deg);
   <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
}

Pentagon(五边形)

<span class="hljs-selector-id">#pentagon</span> {
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">54px</span>;
    <span class="hljs-attribute">border-width</span>: <span class="hljs-number">50px</span> <span class="hljs-number">18px</span> <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-style</span>: solid;
    <span class="hljs-attribute">border-color</span>: red transparent;
}
<span class="hljs-selector-id">#pentagon</span><span class="hljs-selector-pseudo">:before</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">top</span>: -<span class="hljs-number">85px</span>;
    <span class="hljs-attribute">left</span>: -<span class="hljs-number">18px</span>;
    <span class="hljs-attribute">border-width</span>: <span class="hljs-number">0</span> <span class="hljs-number">45px</span> <span class="hljs-number">35px</span>;
    <span class="hljs-attribute">border-style</span>: solid;
    <span class="hljs-attribute">border-color</span>: transparent transparent red;
}

Hexagon(六边形)

<span class="hljs-selector-id">#hexagon</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">55px</span>;
    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">position</span>: relative;
}
<span class="hljs-selector-id">#hexagon</span><span class="hljs-selector-pseudo">:before</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: -<span class="hljs-number">25px</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">25px</span> solid red;
}
<span class="hljs-selector-id">#hexagon</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">bottom</span>: -<span class="hljs-number">25px</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">25px</span> solid red;
}

Octagon(八边形)

<span class="hljs-selector-id">#octagon</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">position</span>: relative;
}

<span class="hljs-selector-id">#octagon</span><span class="hljs-selector-pseudo">:before</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">29px</span> solid red;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">29px</span> solid <span class="hljs-number">#fff</span>;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">29px</span> solid <span class="hljs-number">#fff</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">42px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
}

<span class="hljs-selector-id">#octagon</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">29px</span> solid red;
    <span class="hljs-attribute">border-left</span>: <span class="hljs-number">29px</span> solid <span class="hljs-number">#fff</span>;
    <span class="hljs-attribute">border-right</span>: <span class="hljs-number">29px</span> solid <span class="hljs-number">#fff</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">42px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
}

Heart(心形)

<span class="hljs-selector-id">#heart</span> {
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">90px</span>;
}
<span class="hljs-selector-id">#heart</span><span class="hljs-selector-pseudo">:before</span>,
<span class="hljs-selector-id">#heart</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;
    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">-moz-border-radius</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
    <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
       <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
        <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
         <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
    <span class="hljs-attribute">-webkit-transform-origin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100%</span>;
       <span class="hljs-attribute">-moz-transform-origin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100%</span>;
        <span class="hljs-attribute">-ms-transform-origin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100%</span>;
         <span class="hljs-attribute">-o-transform-origin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">transform-origin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100%</span>;
}
<span class="hljs-selector-id">#heart</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
       <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
        <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
         <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
    <span class="hljs-attribute">-webkit-transform-origin</span>: <span class="hljs-number">100%</span> <span class="hljs-number">100%</span>;
       <span class="hljs-attribute">-moz-transform-origin</span>: <span class="hljs-number">100%</span> <span class="hljs-number">100%</span>;
        <span class="hljs-attribute">-ms-transform-origin</span>: <span class="hljs-number">100%</span> <span class="hljs-number">100%</span>;
         <span class="hljs-attribute">-o-transform-origin</span>: <span class="hljs-number">100%</span> <span class="hljs-number">100%</span>;
            <span class="hljs-attribute">transform-origin </span>:<span class="hljs-number">100%</span> <span class="hljs-number">100%</span>;
}

Infinity(无限符图形)

<span class="hljs-selector-id">#infinity</span> {
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">212px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
}

<span class="hljs-selector-id">#infinity</span><span class="hljs-selector-pseudo">:before</span>,
<span class="hljs-selector-id">#infinity</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">60px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">60px</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">20px</span> solid red;
    <span class="hljs-attribute">-moz-border-radius</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">50px</span>;
         <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
       <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
        <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
         <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(-45deg);
}

<span class="hljs-selector-id">#infinity</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">left</span>: auto;
    <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">-moz-border-radius</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span>;
         <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span>;
    <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
       <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
        <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
         <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
}

Diamond Square(菱形)

<span class="hljs-selector-id">#diamond</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-bottom-color</span>: red;
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">top</span>: -<span class="hljs-number">50px</span>;
}
<span class="hljs-selector-id">#diamond</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">left</span>: -<span class="hljs-number">50px</span>;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-top-color</span>: red;
}

Diamond Shield(钻石盾牌)

<span class="hljs-selector-id">#diamond-shield</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">20px</span> solid red;
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">top</span>: -<span class="hljs-number">50px</span>;
}
<span class="hljs-selector-id">#diamond-shield</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">left</span>: -<span class="hljs-number">50px</span>; <span class="hljs-attribute">top</span>: <span class="hljs-number">20px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">70px</span> solid red;
}

Diamond Narrow

<span class="hljs-selector-id">#diamond-narrow</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">70px</span> solid red;
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">top</span>: -<span class="hljs-number">50px</span>;
}
<span class="hljs-selector-id">#diamond-narrow</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">left</span>: -<span class="hljs-number">50px</span>; <span class="hljs-attribute">top</span>: <span class="hljs-number">70px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">50px</span> solid transparent;
    <span class="hljs-attribute">border-top</span>: <span class="hljs-number">70px</span> solid red;
}

Cut Diamond(砖石形)

<span class="hljs-selector-id">#cut-diamond</span> {
    <span class="hljs-attribute">border-style</span>: solid;
    <span class="hljs-attribute">border-color</span>: transparent transparent red transparent;
    <span class="hljs-attribute">border-width</span>: <span class="hljs-number">0</span> <span class="hljs-number">25px</span> <span class="hljs-number">25px</span> <span class="hljs-number">25px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span> <span class="hljs-number">0</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span>;
}
<span class="hljs-selector-id">#cut-diamond</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">25px</span>;
    <span class="hljs-attribute">left</span>: -<span class="hljs-number">25px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">border-style</span>: solid;
    <span class="hljs-attribute">border-color</span>: red transparent transparent transparent;
    <span class="hljs-attribute">border-width</span>: <span class="hljs-number">70px</span> <span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">50px</span>;
}

Egg(鸡蛋)

<span class="hljs-selector-id">#egg</span> {
   <span class="hljs-attribute">display</span>:block;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">126px</span>;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">180px</span>;
   <span class="hljs-attribute">background-color</span>: red;
   <span class="hljs-attribute">-webkit-border-radius</span>: <span class="hljs-number">63px</span> <span class="hljs-number">63px</span> <span class="hljs-number">63px</span> <span class="hljs-number">63px</span> / <span class="hljs-number">108px</span> <span class="hljs-number">108px</span> <span class="hljs-number">72px</span> <span class="hljs-number">72px</span>;
   <span class="hljs-attribute">border-radius</span>:         <span class="hljs-number">50%</span>  <span class="hljs-number">50%</span>  <span class="hljs-number">50%</span>  <span class="hljs-number">50%</span>  / <span class="hljs-number">60%</span>   <span class="hljs-number">60%</span>   <span class="hljs-number">40%</span>  <span class="hljs-number">40%</span>;
}

Pac-Man(吃豆人)

<span class="hljs-selector-id">#pacman</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">0px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">0px</span>;
  <span class="hljs-attribute">border-right</span>: <span class="hljs-number">60px</span> solid transparent;
  <span class="hljs-attribute">border-top</span>: <span class="hljs-number">60px</span> solid red;
  <span class="hljs-attribute">border-left</span>: <span class="hljs-number">60px</span> solid red;
  <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">60px</span> solid red;
  <span class="hljs-attribute">border-top-left-radius</span>: <span class="hljs-number">60px</span>;
  <span class="hljs-attribute">border-top-right-radius</span>: <span class="hljs-number">60px</span>;
  <span class="hljs-attribute">border-bottom-left-radius</span>: <span class="hljs-number">60px</span>;
  <span class="hljs-attribute">border-bottom-right-radius</span>: <span class="hljs-number">60px</span>;
}

Talk Bubble(聊天框)

<span class="hljs-selector-id">#talkbubble</span> {
   <span class="hljs-attribute">width</span>: <span class="hljs-number">120px</span>;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;
   <span class="hljs-attribute">background</span>: red;
   <span class="hljs-attribute">position</span>: relative;
   <span class="hljs-attribute">-moz-border-radius</span>:    <span class="hljs-number">10px</span>;
   <span class="hljs-attribute">-webkit-border-radius</span>: <span class="hljs-number">10px</span>;
   <span class="hljs-attribute">border-radius</span>:         <span class="hljs-number">10px</span>;
}
<span class="hljs-selector-id">#talkbubble</span><span class="hljs-selector-pseudo">:before</span> {
   <span class="hljs-attribute">content</span>:<span class="hljs-string">""</span>;
   <span class="hljs-attribute">position</span>: absolute;
   <span class="hljs-attribute">right</span>: <span class="hljs-number">100%</span>;
   <span class="hljs-attribute">top</span>: <span class="hljs-number">26px</span>;
   <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
   <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
   <span class="hljs-attribute">border-top</span>: <span class="hljs-number">13px</span> solid transparent;
   <span class="hljs-attribute">border-right</span>: <span class="hljs-number">26px</span> solid red;
   <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">13px</span> solid transparent;
}

12 Point Burst(爆炸形状)

<span class="hljs-selector-id">#burst-12</span> {
    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">80px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-attribute">text-align</span>: center;
}
<span class="hljs-selector-id">#burst-12</span><span class="hljs-selector-pseudo">:before</span>, <span class="hljs-selector-id">#burst-12</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">80px</span>;
    <span class="hljs-attribute">background</span>: red;
}
<span class="hljs-selector-id">#burst-12</span><span class="hljs-selector-pseudo">:before</span> {
    <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(30deg);
       <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(30deg);
        <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(30deg);
         <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(30deg);
}
<span class="hljs-selector-id">#burst-12</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(60deg);
       <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(60deg);
        <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(60deg);
         <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(60deg);
}

Yin Yang(阴阳八卦)

<span class="hljs-selector-id">#yin-yang</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">96px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">48px</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-number">#eee</span>;
    <span class="hljs-attribute">border-color</span>: red;
    <span class="hljs-attribute">border-style</span>: solid;
    <span class="hljs-attribute">border-width</span>: <span class="hljs-number">2px</span> <span class="hljs-number">2px</span> <span class="hljs-number">50px</span> <span class="hljs-number">2px</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">position</span>: relative;
}

<span class="hljs-selector-id">#yin-yang</span><span class="hljs-selector-pseudo">:before</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-number">#eee</span>;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">18px</span> solid red;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">12px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">12px</span>;
}

<span class="hljs-selector-id">#yin-yang</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">border</span>: <span class="hljs-number">18px</span> solid <span class="hljs-number">#eee</span>;
    <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">12px</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">12px</span>;
}

Badge Ribbon(徽章丝带)

<span class="hljs-selector-id">#badge-ribbon</span> {
 <span class="hljs-attribute">position</span>: relative;
 <span class="hljs-attribute">background</span>: red;
 <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
 <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
 <span class="hljs-attribute">-moz-border-radius</span>:    <span class="hljs-number">50px</span>;
 <span class="hljs-attribute">-webkit-border-radius</span>: <span class="hljs-number">50px</span>;
 <span class="hljs-attribute">border-radius</span>:         <span class="hljs-number">50px</span>;
}

<span class="hljs-selector-id">#badge-ribbon</span><span class="hljs-selector-pseudo">:before</span>,
<span class="hljs-selector-id">#badge-ribbon</span><span class="hljs-selector-pseudo">:after</span> {
  <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">70px</span> solid red;
  <span class="hljs-attribute">border-left</span>: <span class="hljs-number">40px</span> solid transparent;
  <span class="hljs-attribute">border-right</span>: <span class="hljs-number">40px</span> solid transparent;
  <span class="hljs-attribute">top</span>: <span class="hljs-number">70px</span>;
  <span class="hljs-attribute">left</span>: -<span class="hljs-number">10px</span>;
  <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(-140deg);
  <span class="hljs-attribute">-moz-transform</span>:    <span class="hljs-built_in">rotate</span>(-140deg);
  <span class="hljs-attribute">-ms-transform</span>:     <span class="hljs-built_in">rotate</span>(-140deg);
  <span class="hljs-attribute">-o-transform</span>:      <span class="hljs-built_in">rotate</span>(-140deg);
}

<span class="hljs-selector-id">#badge-ribbon</span><span class="hljs-selector-pseudo">:after</span> {
  <span class="hljs-attribute">left</span>: auto;
  <span class="hljs-attribute">right</span>: -<span class="hljs-number">10px</span>;
  <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(140deg);
  <span class="hljs-attribute">-moz-transform</span>:    <span class="hljs-built_in">rotate</span>(140deg);
  <span class="hljs-attribute">-ms-transform</span>:     <span class="hljs-built_in">rotate</span>(140deg);
  <span class="hljs-attribute">-o-transform</span>:      <span class="hljs-built_in">rotate</span>(140deg);
}

Space Invader(太空入侵者)

<span class="hljs-selector-id">#space-invader</span>{
  <span class="hljs-attribute">box-shadow</span>:
    <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">1em</span> red,
    <span class="hljs-number">0</span> <span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">1em</span> red,
    -<span class="hljs-number">2.5em</span> <span class="hljs-number">1.5em</span> <span class="hljs-number">0</span> .<span class="hljs-number">5em</span> red,
    <span class="hljs-number">2.5em</span> <span class="hljs-number">1.5em</span> <span class="hljs-number">0</span> .<span class="hljs-number">5em</span> red,
    -<span class="hljs-number">3em</span> -<span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">3em</span> -<span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">2em</span> -<span class="hljs-number">2em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">2em</span> -<span class="hljs-number">2em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">3em</span> -<span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">2em</span> -<span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">2em</span> -<span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">3em</span> -<span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">4em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">4em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">5em</span> <span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">4em</span> <span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">4em</span> <span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">5em</span> <span class="hljs-number">1em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">5em</span> <span class="hljs-number">2em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">5em</span> <span class="hljs-number">2em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">5em</span> <span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">3em</span> <span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">3em</span> <span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">5em</span> <span class="hljs-number">3em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">2em</span> <span class="hljs-number">4em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    -<span class="hljs-number">1em</span> <span class="hljs-number">4em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">1em</span> <span class="hljs-number">4em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red,
    <span class="hljs-number">2em</span> <span class="hljs-number">4em</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red;

    <span class="hljs-attribute">background</span>: red;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">1em</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">1em</span>;
    <span class="hljs-attribute">overflow</span>: hidden;

    <span class="hljs-attribute">margin</span>: <span class="hljs-number">50px</span> <span class="hljs-number">0</span> <span class="hljs-number">70px</span> <span class="hljs-number">65px</span>;
  }

TV Screen(电视屏幕)

<span class="hljs-selector-id">#tv</span> {
  <span class="hljs-attribute">position</span>: relative;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">150px</span>;
  <span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span> <span class="hljs-number">0</span>;
  <span class="hljs-attribute">background</span>: red;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span> / <span class="hljs-number">10%</span>;
  <span class="hljs-attribute">color</span>: white;
  <span class="hljs-attribute">text-align</span>: center;
  <span class="hljs-attribute">text-indent</span>: .<span class="hljs-number">1em</span>;
}
<span class="hljs-selector-id">#tv</span><span class="hljs-selector-pseudo">:before</span> {
  <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">top</span>: <span class="hljs-number">10%</span>;
  <span class="hljs-attribute">bottom</span>: <span class="hljs-number">10%</span>;
  <span class="hljs-attribute">right</span>: -<span class="hljs-number">5%</span>;
  <span class="hljs-attribute">left</span>: -<span class="hljs-number">5%</span>;
  <span class="hljs-attribute">background</span>: inherit;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5%</span> / <span class="hljs-number">50%</span>;
}

Chevron(雪佛龙)

<span class="hljs-selector-id">#chevron</span> {
  <span class="hljs-attribute">position</span>: relative;
  <span class="hljs-attribute">text-align</span>: center;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">12px</span>;
  <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">6px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">60px</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;
}

<span class="hljs-selector-id">#chevron</span><span class="hljs-selector-pseudo">:before</span> {
  <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">51%</span>;
  <span class="hljs-attribute">background</span>: red;
  <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">skew</span>(0deg, 6deg);
  <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">skew</span>(0deg, 6deg);
  <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">skew</span>(0deg, 6deg);
  <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">skew</span>(0deg, 6deg);
  <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skew</span>(0deg, 6deg);
}
<span class="hljs-selector-id">#chevron</span><span class="hljs-selector-pseudo">:after</span> {
  <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">50%</span>;
  <span class="hljs-attribute">background</span>: red;
  <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">skew</span>(0deg, -6deg);
  <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">skew</span>(0deg, -6deg);
  <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">skew</span>(0deg, -6deg);
  <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">skew</span>(0deg, -6deg);
  <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skew</span>(0deg, -6deg);
}

Magnifying Glass(放大镜)

<span class="hljs-selector-id">#magnifying-glass</span>{
 <span class="hljs-attribute">font-size</span>: <span class="hljs-number">10em</span>; <span class="hljs-comment">/* This controls the size. */</span>
 <span class="hljs-attribute">display</span>: inline-block;
 <span class="hljs-attribute">width</span>: <span class="hljs-number">0.4em</span>;
 <span class="hljs-attribute">height</span>: <span class="hljs-number">0.4em</span>;
 <span class="hljs-attribute">border</span>: <span class="hljs-number">0.1em</span> solid red;
 <span class="hljs-attribute">position</span>: relative;
 <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0.35em</span>;
}
<span class="hljs-selector-id">#magnifying-glass</span><span class="hljs-selector-pseudo">::before</span>{
 <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
 <span class="hljs-attribute">display</span>: inline-block;
 <span class="hljs-attribute">position</span>: absolute;
 <span class="hljs-attribute">right</span>: -<span class="hljs-number">0.25em</span>;
 <span class="hljs-attribute">bottom</span>: -<span class="hljs-number">0.1em</span>;
 <span class="hljs-attribute">border-width</span>: <span class="hljs-number">0</span>;
 <span class="hljs-attribute">background</span>: red;
 <span class="hljs-attribute">width</span>: <span class="hljs-number">0.35em</span>;
 <span class="hljs-attribute">height</span>: <span class="hljs-number">0.08em</span>;
 <span class="hljs-attribute">-webkit-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
    <span class="hljs-attribute">-moz-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
     <span class="hljs-attribute">-ms-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
      <span class="hljs-attribute">-o-transform</span>: <span class="hljs-built_in">rotate</span>(45deg);
}

Facebook Icon(Facebook图标)

<span class="hljs-selector-id">#facebook-icon</span> {
  <span class="hljs-attribute">background</span>: red;
  <span class="hljs-attribute">text-indent</span>: -<span class="hljs-number">999em</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">110px</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
  <span class="hljs-attribute">position</span>: relative;
  <span class="hljs-attribute">overflow</span>: hidden;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">15px</span> solid red;
  <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">0</span>;
}
<span class="hljs-selector-id">#facebook-icon</span><span class="hljs-selector-pseudo">::before</span> {
  <span class="hljs-attribute">content</span>: <span class="hljs-string">"/20"</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">background</span>: red;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">90px</span>;
  <span class="hljs-attribute">bottom</span>: -<span class="hljs-number">30px</span>;
  <span class="hljs-attribute">right</span>: -<span class="hljs-number">37px</span>;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">20px</span> solid <span class="hljs-number">#eee</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">25px</span>;
}
<span class="hljs-selector-id">#facebook-icon</span><span class="hljs-selector-pseudo">::after</span> {
  <span class="hljs-attribute">content</span>: <span class="hljs-string">"/20"</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">55px</span>;
  <span class="hljs-attribute">top</span>: <span class="hljs-number">50px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>;
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#eee</span>;
  <span class="hljs-attribute">right</span>: <span class="hljs-number">5px</span>;
}

Cone(圆锥形)

<span class="hljs-selector-id">#cone</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">border-left</span>: <span class="hljs-number">70px</span> solid transparent;
  <span class="hljs-attribute">border-right</span>: <span class="hljs-number">70px</span> solid transparent;
  <span class="hljs-attribute">border-top</span>: <span class="hljs-number">100px</span> solid red;
  <span class="hljs-attribute">-moz-border-radius</span>: <span class="hljs-number">50%</span>;
  <span class="hljs-attribute">-webkit-border-radius</span>: <span class="hljs-number">50%</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
}

Moon(月亮)

<span class="hljs-selector-id">#moon</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">80px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
  <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">15px</span> <span class="hljs-number">15px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> red;
}

Cross(十字架)

<span class="hljs-selector-id">#cross</span> {
  <span class="hljs-attribute">background</span>: red;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
  <span class="hljs-attribute">position</span>: relative;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>;
}
<span class="hljs-selector-id">#cross</span><span class="hljs-selector-pseudo">:after</span> {
  <span class="hljs-attribute">background</span>: red;
  <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>;
  <span class="hljs-attribute">left</span>: -<span class="hljs-number">40px</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">top</span>: <span class="hljs-number">40px</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
}

以上就是纯CSS绘制的各种图形,感受到CSS的强大了吧。

原文链接:http://www.codeceo.com/article/40-css-shapes.html
本文作者:码农网 – 陈少华

博主的文章或程序如果给您带来了价值,感谢您打赏一二
微信扫码支付 支付宝扫码支付

发表评论