CSSで図形 三角形&台形
2010.12.12
この記事は最終更新日から1年以上が経過しています。
CSSで簡単な図形の作り方。
三角形
取り敢えず、要素はdivで
<div id="triangle"></div>
#triangle{ height:0px; width:0px; border:50px solid #000; }
#triangle{ height:0px; width:0px; border:50px solid #000; border-top-color:#f00; }
border-color:transparent;
#triangle{ height:0px; width:0px; border:50px solid #000; border-color:transparent; border-top-color:#000; }
すると、
あらま。三角形の出来上がり!
これに、widthをくわえると
台形にもなります。
#daikei{ height:0px; width:50px; border:25px solid #000; border-color:transparent; border-bottom-color:#000; }
数値や色を調整することによって、いろんな形が作成出来ます。