CSS3 borderで色々な図形を作成してみました。
2011.11.20
この記事は最終更新日から1年以上が経過しています。
CSS3 三角形 ひし形 等の作成方法のエントリーを参考にborderで色々な図形を作ってみました。
では、復習。
borderで三角形を作る
HTML
<div class="shape01"></div>
HTMLの要素は1つのみ用意。
実際、図形やアイコン作成の為、DOM要素を沢山記述してしまうと、パフォーマンスも悪く、SEO的にもよろしくありません。
図形作成対象の要素はDiv以外のp要素等でも問題ありません。
css3
.shape01{
height:0px;
width:0px;
border:50px solid #000;
border-color:transparent;
border-top-color:#000;
}
が出来ると思います。
これを発展させ、以下のような図形を作ってみました。
どれも1,2行ほどソースを加えたりしただけのものなので、
簡単に作成する事が出来ると思います。
よろしければデモページを参考にして頂ければと思っております。
