Web’Notes

CSSで三角形を描く方法

Hip 2 be Triangle Square Circle By: Kristian Bjornard

CSSを使ったデザインも年々進化して、角を丸くしたり影を付けて見たりと画像と見分けが付かないほどになってきています。

今回はそんなCSSのデザイン技術の一つで三角形を作る方法を紹介したいと思います。三角形をCSSで作れれば、ボックスを合わせてフキダシとしたり、矢印などが作成することが出来るようになります。

1. 三角形で作れるデザイン
2. 三角形の作り方

三角形で作れるデザイン

三角形と他の要素を組み合わせれば、このようなものが作れます。線と組み合わせれば矢印、ボックスと組み合わせれば、フキダシやホームっぽいアイコンが作れます。

三角形の作り方

三角形の作り方は以外と簡単でボーダー(枠線)を利用します。まず枠線の基本的な仕様を理解しましょう。

まずは、参考として四方の色を変えたボックスを用意しました。これだけでは良くわからないので枠線のサイズを大きくして見ます。

「border:3px」を指定

「border:20px」を指定

20pxくらいだとわかると思いますが、boderはこのように角が斜めの台形となっています。

ここまで、理解できれば後は簡単です。台形になる原因である、真ん中の四角(空白)部分を消してしまえば良いのです。真ん中の四角(空白)部分を「width:0」「height:0」で消したものがこちらになります。

.triangle{
    width:0px;
    height:0px;
    margin:5px;
    border-top:45px solid #556270;
    border-left:45px solid #4ECDC4;
    border-right:45px solid #FF6B6B;
    border-bottom:45px solid #C7F464;
}

さらに、左右と下の部分を消せば下向きの三角形が完成します。

.triangle2{
    width:0px;
    height:0px;
    margin:5px;
    border-top:45px solid #556270;
    border-left:45px solid transparent;
    border-right:45px solid transparent;
    border-bottom:45px solid transparent;
}

borderを消すときは、不要なborderのCSS自体を削除するのではなくborderは残したまま「transparent(透明化)」て消すようにします。上記で”boderは角が斜めになる”と述べましたがこれはあくまで四方のborderを作成した場合のみです。borderが一方のみであればこのように直線として引かれます。

.sample
    display:inline-block; 
    width:80px;
    height:0px;
    margin:5px;
    border-top:20px solid #556270;
}

このようになってしまうため、三角形を作成するときは四方のborderは残したまま透明化するための値「transparent」を利用します。

CSS CSS, Design, HTML