CSSで図形 三角形＆台形
2010.12.12
この記事は最終更新日から1年以上が経過しています。
CSSで簡単な図形の作り方。
三角形
取り敢えず、要素はdivで
<div id="triangle"></div>
#triangle{
height:0px;
width:0px;
border:50px solid #000;
}
高さ、幅0pxのdivに50pxのボーダーを引くと、正方形が出来る。
ボーダーのみで作られた正方形。
上のみ色を変えると、
#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;
}
数値や色を調整することによって、いろんな形が作成出来ます。
