Use CSS to achieve graphs such as yin-yang gossip map

CSS is still relatively powerful, can achieve the Chinese classical "yin and yang Gossip map" and other shapes.
Square

 #rectangle { width: 200px; height: 100px; backgrount-color: red; }  #circle { width: 100px  ; height: 100px  ; -webkit-border-radius: 100px  ; -moz-border-radius: 100px  ; Border-radius: 100px  ; background-color: Red ;}

Elliptic

  #triangle-up { width: 0  ; height: 0  ; border-left: 50px solid Transparent ; border-right: 50px solid Transparent ; border-bottom: 100px solid red ;}

Right Triangle right-angled edge Left-top

  #triangle-leftbottom {  width: 0;        height: 0;        border-left: 100px solid red;   border-top: 100px solid transparent; }

Right Angle side Right-top

  #triangle-righttop {  width: 0;        height: 0;        border-right: 100px solid red;   border-top: 100px solid transparent; }

Trapezoidal

  #parallelogram { width: 150px  ; height: 100px  ; -webkit-transform: skew(20deg) ; -moz-transform: skew(20deg) ; transform: skew(20deg) ; background: Red ;}

Egg

  #yin-yang { width: 96px  ; height: 48px  ; background: #eee  ; border-color: Red ; border-style: solid ; border-width: 2px 2px 55px 2px  ; Border-radius: 100%  ; position: relative ;}  #yin-yang: Before { content: ""  ; position: Absolute ; top: 50%  ;Left  : 0  ; background: #eee  ; Border: 18px solid red ; Border-radius: 100%  ; width: 12px  ; height: 12px  ;}  #yin-yang: After { content: ""  ; position: Absolute ; top: 50%  ;Left  : 50%  ; background: Red ; Border: 18px solid #eee  ; Border-radius:100% ; width: 12px  ; height: 12px  ;}< Span class= "Hljs-rule" >  < Span class= "hljs-rule" > Gossip map doesn't come out, egg hurts, download the HTML file http://download.csdn.net/detail/huoyingfans/7455161  < Span class= "hljs-rule" > or go http://blog.fansunion.cn/articles/3736 see  

 Many other articles please refer to:  http://www.itfriend.cn/user/fansunion     

Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.

Use CSS to achieve graphs such as yin-yang gossip map