CSSを使用して陰陽八卦図やその他のグラフィックスを実現する_html/css_WEB-ITnose

CSS は非常に強力で、古典的な中国の「陰陽八卦図」のような形状を実現できます。

正方形

   #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; }

ellipse

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

直角三角形

直角辺左上

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

直角辺右上

rree

台形

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

卵

rree rree