BjornardCSSを使ったデザインも年々進化して、角を丸くしたり影を付けて見たりと画像と見分けが付かないほどになってきています。今回はそんなCSSのデザイン技術の一つで三角形を作る方法を紹介したいと思います。三角形をCSSで作れれば、ボックスを合わせてフキダシとしたり、矢印などが作成することが出来るようになります。三角形で作れるデザイン三角形と他の要素を組み合わせれば、このようなものが作れます。線と組み合わせれば矢印、ボックスと組み合わせれば、フキダシやホームっぽいアイコンが作れます。三角形の作り方は以外と簡単でボーダー(枠線)を利用します。枠線の基本的な仕様を理解しましょう。参考として四方の色を変えたボックスを用意しました。これだけでは良くわからないので枠線のサイズを大きくして見ます。「border:20px」を指定20pxくらいだとわかると思いますが、boderはこのように角が斜めの台形となっています。ここまで、理解できれば後は簡単です。台形になる原因である、真ん中の四角(空白)部分を消してしまえば良いのです。真ん中の四角(空白)部分を「width:0」「height:0」で消したものがこちらになります。#C7F464;}さらに、左右と下の部分を消せば下向きの三角形が完成します。transparent;}三角形作成時の注意点borderを消すときは、不要なborderのCSS自体を削除するのではなくborderは残したまま「transparent(透明化)」て消すようにします。上記で”boderは角が斜めになる”と述べましたがこれはあくまで四方のborderを作成した場合のみです。borderが一方のみであればこのように直線として引かれます。#556270;}このようになってしまうため、三角形を作成するときは四方のborderは残したまま透明化するための値「transparent」を利用します。コメントをキャンセルメールアドレスが公開されることはありません。MyThemeShop。