CSSで三角形を作る方法をご紹介!

この記事では、CSSのborderを使ってCSSのみで三角形を作る方法を紹介します。
枠線を引くときに使うborderプロパティを利用して三角形を作ります。複数のパターンの三角形についてサンプルコードも用意しているので是非試してみてください!

コンテンツ [表示]

  1. 1CSSで三角形を作る方法
  2. 1.1borderで三角形を作るしくみ
  3. 1.2いろいろな形の三角形の作り方
  4. 2まとめ

CSSで三角形を作る方法

この記事では、CSSのborderを使ってCSSのみで三角形を作る方法を紹介します。

borderは通常、以下のように枠線を引くことができるプロパティです。実はCSSではこのborderを応用することで、三角形を作ることができます!

borderで三角形を作るしくみ

まずは、上下左右に違う色でborderを付けてみましょう。すると、四隅の境目の部分が斜めになっているのがわかるでしょうか?これを工夫することで三角形を作ります。

ここで、div要素のwidthheight0を指定してみましょう。すると真ん中の白い空間がなくなり、borderだけになります。(わかりやすいようにborderの太さを50pxに増やしました。)

こうすると三角形が4つくっついているように見えますね!あとは、不要な三角形の色を透明にすることで三角形を表現することができます。

例えば、border-bottom以外を透明にするとこのようになります。

いろいろな形の三角形の作り方

基本的に、一つの三角形(一箇所のborderで作られる部分)は二等辺三角形になりますが、各borderの太さを工夫したり、表示する場所を工夫することで様々な形をつくることができます。

基本的にはborderwidthは三角形の高さと対応します。よって、widthを大きくすればするほど高さが高い鋭角三角形が作られると覚えておいてください。

正三角形の作り方

正三角形は、底辺の長さと高さの関係が2:√3になっていて(三平方の定理)、これを利用して作ることができます。底辺の長さは、隣接するborderの幅の和になります。

例えばborder-bottomの部分で三角形を作る場合はborder-rightborder-leftのwidthの和が三角形の底辺の長さになります。

よって、border-rightborder-leftのwidthの和とborder-bottomのwidthが2:√3の関係になるように指定すれば良いというわけです。

2:√3の関係にするには、高さ=底辺×√3÷2にすればよいです。
(ちなみに√3はおよそ1.73です。)

このようにして正三角形を作ると以下のようになります。

斜めの三角形の作り方

上下左右の三角形の作り方はわかったけど斜めの三角形はどうやって作るのか?と思っている人もいるかとおもいます。

斜め45度の三角形は、2つの三角形を組み合わせることで作ることができます!
例えば以下のようにborder-topborder-rightに同じ色を指定し、ほかを透明にすると右上向きの三角形を作ることができます。

この方法では、三角形の高さに当たる部分が斜めになっていて指定できない箇所なので、高さを指定することができません。

また、各borderwidthを違う値にすると歪んだ形になってしまうため、同じ値を指定した二等辺三角形しか作ることができないことに注意が必要です。

枠線のみの三角形

今三角形を構成しているborderはもともと枠線なので、これにさらに枠線をつけるという事ができません。

なので、枠線のみの三角形を作りたい場合は三角形の中に一回り小さい白い三角形を配置することで枠線を表現します。

一回り小さい白い三角形を作り、position: absolute;を指定してうまい位置に配置します。位置の指定は三角形の大きさによって異なるので、少しずつ値を変えて試しながら適切な値を探してみてください。

白い三角形に指定しているz-indexは要素を重ねたときにどの順番で重ねるかを指定するプロパティです。値が大きいほうが上になるので、ひとまず白い三角形に10を指定しています。

まとめ

上記の方法を使えば、画像を用意したりすることなくCSSのみで三角形を作ることができます。
また、これらと別の図形を組み合わせたりして、矢印や吹き出しなど、様々なデザインを作成することができます。

ぜひ色々と試してみてください!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

まゆ
ライター

まゆ

 主にHTML,Bootstrapの記事を描いています。