CSS応用編 vol.01 | Webデザイナーを目指す人のブログ

CSSで三角形を作る

今日はCSSで三角形を作る方法についてみていきます。
三角形を作ることは結構あるんですが、その度にいちいち調べて書いてたので、
本質を理解する＋それでも忘れちゃった時用の備忘録として三角形の作り方を書いていきましょう。

CSSで三角形を作れる理由

そもそもなんでCSSで三角形が作れるのか、最初見たときは不思議でした。
三角形はborderプロパティを使うことで作ることが出来るんですが、
このborderプロパティの境界線が三角形を作る上での大切なポイントなんです。

borderは
border-top
border-right
border-bottom
border-left
のプロパティがあり、それぞれ指定することができます。
普段borderを使うときは
border: 1px solid #000;
のように４辺まとめて一色で指定することが多いので気づかないのですが、
４辺を別々の色で見ると三角形を作れる理由がわかります。

例えば縦横100pxのボックスに上下左右に10pxのborderをつけてみましょう。

.box {
  border-top: 10px solid black;
  border-right: 10px solid yellow;
　　　　border-bottom: 10px solid skyblue;
  border-left: 10px solid green;
  width:100px;
  height:100px;
}

borderとborderの境界線をよく見てください。
斜めになるんです！冷静に考えるとそりゃあそうだろって感じなんですが、
始めてみたときはええええ！って思いました。

これで三角形を作れる理由は大体わかったと思います。

試しにボックスの中身をどんどん小さくしていってみましょう

縦横50pxのボックス

縦横25pxのボックス

縦横10pxのボックス

縦横0pxのボックス

おおお！！！三角形できてる・・・？
ちょっと10pxじゃ小さいのでborderの太さを50pxにして大きくしてみましょう

きちんと三角形が出来てました！

まわりを透明にする

4辺に色がついているこの状態では中々使い勝手がわるいので、不要な部分は透明にしましょう。
透明にするのは色を指定するところにtransparentと指定することでできます。

たとえば下向きの三角形を作りたい場合は

.box {
  border-top: 50px solid black;
  border-right: 50px solid transparent;
　　　　border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
  width:0px;
  height:0px;
}

このようにborder-top意外にtransparentを指定します。

三角形の高さを変える

三角形の高さを変えることもできます。

border-topだけ細くすると

.box {
  border-top: 30px solid black;
  border-right: 50px solid transparent;
　　　　border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
  width:0px;
  height:0px;
}

こんなふうに少し潰れた三角形ができます。

border-topだけ太くすると

.box {
  border-top: 100px solid black;
  border-right: 50px solid transparent;
　　　　border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
  width:0px;
  height:0px;
}

こんなふうに少し細めの三角形ができます。

今日はここまでです！来週からは吹き出しを作っていきます！！