このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.11.20

CSS3 borderで色々な図形を作成してみました。

CSS3 三角形 ひし形 等の作成方法のエントリーを参考にborderで色々な図形を作ってみました。

では、復習。

borderで三角形を作る

HTML

[code]<div class="shape01"></div>[/code]

HTMLの要素は1つのみ用意。

実際、図形やアイコン作成の為、DOM要素を沢山記述してしまうと、パフォーマンスも悪く、SEO的にもよろしくありません。

図形作成対象の要素はDiv以外のp要素等でも問題ありません。

css3

[code].shape01{
height:0px;
width:0px;
border:50px solid #000;
border-color:transparent;
border-top-color:#000;
}[/code]

が出来ると思います。

これを発展させ、以下のような図形を作ってみました。

どれも1,2行ほどソースを加えたりしただけのものなので、

簡単に作成する事が出来ると思います。

よろしければデモページを参考にして頂ければと思っております。

デモページはこちらから

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。