CSS3制作图形大全——碉堡了

- 日理万妓 2022-01-06 15:47 168阅读 0赞

## 为方便观看效果图，请移步原文：[https://www.jqhtml.com/8045.html][https_www.jqhtml.com_8045.html] ##

## Square ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#</code> 
      <code>square</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Rectangle ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#rectangle{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>200px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Circle ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#</code> 
      <code>circle</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-border-radius: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-border-radius: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>/* Cleaner, but slightly less support: use "50%" as value */</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## oval ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#oval { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>200px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-border-radius: </code> 
      <code>100px</code> 
      <code>/ </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-border-radius: </code> 
      <code>100px</code> 
      <code>/ </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>100px</code> 
      <code>/ </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>/* Cleaner, but slightly less support: use "50%" as value */</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Up ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-up { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Down ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-down { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Left ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-</code> 
      <code>left</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Right ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-</code> 
      <code>right</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Top Left ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-topleft { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Top Right ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-topright { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Bottom Left ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-bottomleft { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Triangle Bottom Right ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#triangle-bottomright { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Curved Tail Arrow ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#curvedarrow { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>9px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>9px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>10</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>10</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>10</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>10</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#curvedarrow:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>0</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>3px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>20px</code> 
      <code>0</code> 
      <code>0</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-9px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Trapezoid ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#trapezoid { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Parallelogram ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#parallelogram { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>150px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: skew(</code> 
      <code>20</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: skew(</code> 
      <code>20</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: skew(</code> 
      <code>20</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Star (6-points) ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#star-six { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#star-six:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>30px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Star (5-points) ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#star-five { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>margin</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>display</code> 
      <code>: </code> 
      <code>block</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>:&nbsp; </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>70px</code>&nbsp; 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>:&nbsp;&nbsp; </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform:&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>35</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>35</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform:&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>35</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>35</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#star-five:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>30px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>30px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-45px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-65px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>display</code> 
      <code>: </code> 
      <code>block</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>-35</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform:&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-35</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform:&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-35</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-35</code> 
      <code>deg);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#star-five:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>display</code> 
      <code>: </code> 
      <code>block</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>3px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-105px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>-70</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform:&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-70</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform:&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-70</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-70</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Pentagon ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#pentagon { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>54px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-width</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>18px</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-style</code> 
      <code>: </code> 
      <code>solid</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#pentagon:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-85px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-18px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>45px</code> 
      <code>35px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-style</code> 
      <code>: </code> 
      <code>solid</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-color</code> 
      <code>: </code> 
      <code>transparent</code> 
      <code>transparent</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Hexagon ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#hexagon { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>55px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#hexagon:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-25px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>25px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#hexagon:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>bottom</code> 
      <code>: </code> 
      <code>-25px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>25px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Octagon ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#octagon { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#octagon:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>29px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>29px</code> 
      <code>solid</code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>29px</code> 
      <code>solid</code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>42px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#octagon:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>bottom</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>29px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>29px</code> 
      <code>solid</code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>29px</code> 
      <code>solid</code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>42px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Heart ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#heart { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>90px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#heart:before,</code> 
     </div> 
     <div> 
      <code>#heart:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-border-radius: </code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform-origin: </code> 
      <code>0</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform-origin: </code> 
      <code>0</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform-origin: </code> 
      <code>0</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform-origin: </code> 
      <code>0</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transform-origin: </code> 
      <code>0</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#heart:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform-origin: </code> 
      <code>100%</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform-origin: </code> 
      <code>100%</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform-origin: </code> 
      <code>100%</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform-origin: </code> 
      <code>100%</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transform-origin :</code> 
      <code>100%</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Infinity ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#infinity { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>212px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#infinity:before,</code> 
     </div> 
     <div> 
      <code>#infinity:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>60px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>60px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-border-radius: </code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transform: rotate(</code> 
      <code>-45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#infinity:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>auto</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>right</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-border-radius: </code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transform: rotate(</code> 
      <code>45</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Diamond Square ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#diamond { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom-color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#diamond:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top-color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Diamond Shield ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#diamond-shield { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#diamond-shield:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-50px</code> 
      <code>; </code> 
      <code>top</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Diamond Narrow ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#diamond-narrow { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#diamond-narrow:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-50px</code> 
      <code>; </code> 
      <code>top</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Cut Diamond ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#cut-diamond { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-style</code> 
      <code>: </code> 
      <code>solid</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-color</code> 
      <code>: </code> 
      <code>transparent</code> 
      <code>transparent</code> 
      <code>red</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>25px</code> 
      <code>25px</code> 
      <code>25px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>margin</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>0</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#cut-diamond:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>25px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-25px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-style</code> 
      <code>: </code> 
      <code>solid</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>transparent</code> 
      <code>transparent</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-width</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>50px</code> 
      <code>0</code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Egg ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#egg { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>display</code> 
      <code>:</code> 
      <code>block</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>126px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>180px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>background-color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-border-radius: </code> 
      <code>63px</code> 
      <code>63px</code> 
      <code>63px</code> 
      <code>63px</code> 
      <code>/ </code> 
      <code>108px</code> 
      <code>108px</code> 
      <code>72px</code> 
      <code>72px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>50%</code>&nbsp; 
      <code>50%</code>&nbsp; 
      <code>50%</code>&nbsp; 
      <code>50%</code>&nbsp; 
      <code>/ </code> 
      <code>60%</code>&nbsp;&nbsp; 
      <code>60%</code>&nbsp;&nbsp; 
      <code>40%</code>&nbsp; 
      <code>40%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Pac-Man ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#pacman { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>60px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>60px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>60px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>60px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-top-left-radius: </code> 
      <code>60px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-top-right-radius: </code> 
      <code>60px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-bottom-left-radius: </code> 
      <code>60px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-bottom-right-radius: </code> 
      <code>60px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Talk Bubble ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#talkbubble { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>120px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-border-radius:&nbsp;&nbsp;&nbsp; </code> 
      <code>10px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-border-radius: </code> 
      <code>10px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>10px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#talkbubble:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>:</code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>right</code> 
      <code>: </code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>26px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>13px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>26px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>13px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## 12 Point Burst ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#burst</code> 
      <code>-12</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>text-align</code> 
      <code>: </code> 
      <code>center</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#burst</code> 
      <code>-12:</code> 
      <code>before, #burst</code> 
      <code>-12:</code> 
      <code>after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#burst</code> 
      <code>-12:</code> 
      <code>before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>30</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>30</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>30</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>30</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#burst</code> 
      <code>-12:</code> 
      <code>after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>60</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>60</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>60</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>60</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## 8 Point Burst ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#burst</code> 
      <code>-8</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>text-align</code> 
      <code>: </code> 
      <code>center</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>20</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>20</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>20</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>20</code> 
      <code>eg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#burst</code> 
      <code>-8:</code> 
      <code>before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>135</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-moz-transform: rotate(</code> 
      <code>135</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-ms-transform: rotate(</code> 
      <code>135</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-o-transform: rotate(</code> 
      <code>135</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Yin Yang ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#yin-yang { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>96px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>48px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-color</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-style</code> 
      <code>: </code> 
      <code>solid</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-width</code> 
      <code>: </code> 
      <code>2px</code> 
      <code>2px</code> 
      <code>50px</code> 
      <code>2px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#yin-yang:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>18px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#yin-yang:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>18px</code> 
      <code>solid</code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>border-radius:</code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Badge Ribbon ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#bad</code> 
      <code>ge-ribbon { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>-moz-border-radius:&nbsp;&nbsp;&nbsp; </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>-webkit-border-radius: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>border-radius:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#bad</code> 
      <code>ge-ribbon:before,</code> 
     </div> 
     <div> 
      <code>#bad</code> 
      <code>ge-ribbon:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>40px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>40px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-10px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>-140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-moz-transform:&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-ms-transform:&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-o-transform:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>-140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#bad</code> 
      <code>ge-ribbon:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>auto</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>right</code> 
      <code>: </code> 
      <code>-10px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-webkit-transform: rotate(</code> 
      <code>140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-moz-transform:&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-ms-transform:&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-o-transform:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rotate(</code> 
      <code>140</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Space Invader ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#space-invader{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>box-shadow:</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>0</code> 
      <code>0</code> 
      <code>0</code> 
      <code>1em</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>0</code> 
      <code>1em</code> 
      <code>0</code> 
      <code>1em</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-2.5em</code> 
      <code>1.5em</code> 
      <code>0</code> 
      <code>.</code> 
      <code>5em</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>2.5em</code> 
      <code>1.5em</code> 
      <code>0</code> 
      <code>.</code> 
      <code>5em</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-3em</code> 
      <code>-3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>3em</code> 
      <code>-3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-2em</code> 
      <code>-2em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>2em</code> 
      <code>-2em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-3em</code> 
      <code>-1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-2em</code> 
      <code>-1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>2em</code> 
      <code>-1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>3em</code> 
      <code>-1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-4em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>4em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-5em</code> 
      <code>1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-4em</code> 
      <code>1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>4em</code> 
      <code>1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>5em</code> 
      <code>1em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-5em</code> 
      <code>2em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>5em</code> 
      <code>2em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-5em</code> 
      <code>3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-3em</code> 
      <code>3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>3em</code> 
      <code>3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>5em</code> 
      <code>3em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-2em</code> 
      <code>4em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>-1em</code> 
      <code>4em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>1em</code> 
      <code>4em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>2em</code> 
      <code>4em</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>1em</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>1em</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>overflow</code> 
      <code>: </code> 
      <code>hidden</code> 
      <code>;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>margin</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>0</code> 
      <code>70px</code> 
      <code>65px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## TV Screen ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#</code> 
      <code>tv</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>200px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>150px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>margin</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>50%</code> 
      <code>/ </code> 
      <code>10%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>color</code> 
      <code>: </code> 
      <code>white</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>text-align</code> 
      <code>: </code> 
      <code>center</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>text-indent</code> 
      <code>: .</code> 
      <code>1em</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#tv:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>10%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>bottom</code> 
      <code>: </code> 
      <code>10%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>right</code> 
      <code>: </code> 
      <code>-5%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-5%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: inherit;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>5%</code> 
      <code>/ </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Chevron ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#chevron { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>text-align</code> 
      <code>: </code> 
      <code>center</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>padding</code> 
      <code>: </code> 
      <code>12px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>margin-bottom</code> 
      <code>: </code> 
      <code>6px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>60px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>200px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>#chevron:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>51%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-webkit-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-moz-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-ms-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-o-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#chevron:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>right</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-webkit-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>-6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-moz-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>-6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-ms-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>-6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-o-transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>-6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>transform: skew(</code> 
      <code>0</code> 
      <code>deg, </code> 
      <code>-6</code> 
      <code>deg);</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Facebook Icon ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#faceb</code> 
      <code>ook-</code> 
      <code>icon</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>text-indent</code> 
      <code>: </code> 
      <code>-999em</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>110px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>5px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>overflow</code> 
      <code>: </code> 
      <code>hidden</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>15px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#faceb</code> 
      <code>ook-icon::before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>"/20"</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>40px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>90px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>bottom</code> 
      <code>: </code> 
      <code>-30px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>right</code> 
      <code>: </code> 
      <code>-37px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>solid</code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>25px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#faceb</code> 
      <code>ook-icon::after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>"/20"</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>55px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>right</code> 
      <code>: </code> 
      <code>5px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Moon ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#moon { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>80px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>box-shadow: </code> 
      <code>15px</code> 
      <code>15px</code> 
      <code>0</code> 
      <code>0</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## flag ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#flag { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>110px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>56px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>padding-top</code> 
      <code>: </code> 
      <code>15px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>color</code> 
      <code>: </code> 
      <code>white</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>font-size</code> 
      <code>: </code> 
      <code>11px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>letter-spacing</code> 
      <code>: </code> 
      <code>0.2em</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>text-align</code> 
      <code>: </code> 
      <code>center</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>text-transform</code> 
      <code>: </code> 
      <code>uppercase</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#flag:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>bottom</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>13px</code> 
      <code>solid</code> 
      <code>#eee</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>55px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>55px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Cone ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#cone { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>70px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-top</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-moz-border-radius: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>-webkit-border-radius: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-radius: </code> 
      <code>50%</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Cross ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#</code> 
      <code>cross</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#cross:after { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>-40px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>40px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Base ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>#base { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>background</code> 
      <code>: </code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>display</code> 
      <code>: inline-</code> 
      <code>block</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>55px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>margin-left</code> 
      <code>: </code> 
      <code>20px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>margin-top</code> 
      <code>: </code> 
      <code>55px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>relative</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>100px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
     <div> 
      <code>#base:before { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-bottom</code> 
      <code>: </code> 
      <code>35px</code> 
      <code>solid</code> 
      <code>red</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-left</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>border-right</code> 
      <code>: </code> 
      <code>50px</code> 
      <code>solid</code> 
      <code>transparent</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>content</code> 
      <code>: </code> 
      <code>""</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>height</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>left</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>position</code> 
      <code>: </code> 
      <code>absolute</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>top</code> 
      <code>: </code> 
      <code>-35px</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>width</code> 
      <code>: </code> 
      <code>0</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/yadongliang/p/10677791.html

[https_www.jqhtml.com_8045.html]: https://www.jqhtml.com/8045.html