海外のWebサイトでよく見かけるのが、紙の端を折り込んだようなドッグイヤー(dogeared)デザインだ。たとえばモバイル開発で有名な「yiibu」では、右カラムにあるボックス部分で使われている。 ドッグイヤーデザインは、CSSの擬似要素を利用すると手軽に作れる。もちろん、画像の用意は不要で、HTMLの追加も必要ない。今回のCSS3道場では、シンプルだがWebサイトの見栄えをぐっとアップさせるドッグイヤーデザインのテクニックをマスターしよう。 borderプロパティで三角形を作る ドッグイヤーデザインの1番のポイントは、折りたたまれた「三角形」の部分の作り方。当然ながらCSSには三角形のような多角形を描くためのプロパティは用意されていない。 ヒントはおなじみのborderプロパティだ。borderプロパティは、4辺が以下の図のbのように構成されている(bの図は分かりやすいように4辺の線の色
![10分でできる、海外Webデザイン風テクニック (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f182fdcf6ff200bb90121d0c23ab7c9dd90291f/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fascii.jp%2Fimg%2F2011%2F01%2F18%2F286961%2Fl%2F243c300f4d8c91f6.jpg)