Creating Triangles in CSS Jon Rohan’s Web Developer Field Guide

CSSのボーダーを使った図形描画テクニック色々。
「超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル」でも紹介されていたテクニックですが、borderを使って図形を描画するテクニックです。
border-width を太めにしてそれぞれの線に色をつけることで面白いことが色々と出来るみたい

まず、最初は次のような図形。
border-color でそれぞれの辺に色をつけて、border-width:20px 、 width:0; height:0 で指定するとこんな面白い図形に。



左だけに色をつければ、矢印っぽくも出来ますし、左と上の線だけに色をつけたりすることでいろんな形・角度の３角形が表現出来ます。

更に、border-width:25px 10px 15px 30px; と、それぞれ太さを変えてあげると次のように歪みます。



これも線の色付けの応用次第で、様々な形の四角形が描画できますね。

更に、border-style:dotted で次のように変化（IEの例）



border-style:outset insert, groove といったプロパティでのいろんなブラウザでの出力例。

 

border-style: double で次のような模様に。



border-styleはブラウザによって若干描画結果が違うので注意が必要ですが、なんとも面白いですね。
border-styleを設定したものにも、border-widthをそれぞれ振って遊んでみるとコレまた予想外の図形が出来上がるのかも。

実際のCSSは元エントリを参照してみて下さい。

関連エントリ

• 便利なＣＳＳテクニック３０選
• これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック
• ページ全体に枠線をつけるCSSテクニック