CSSをつかって三角形を作るよ！ | border

作成:2018.09.01 05:00 更新:2020-05-23T09:29:02Z

こんにちは！きっしーです。

今日は、CSSの擬似要素をつかって三角形を作ってみます。

CSSで三角形を作ることができると、ふきだしやリボン風の見出し、リストのマークなどなど、デザインの幅が広がります。

この記事では、CSSで三角形を作る仕組みを理解すること、擬似要素を理解すること、を目的にしています。

HTML/CSSをつかったサンプルはググれば、山のように出てきます。コピペすればすぐに自分のブログで使うこともできます。しかし、仕組みを理解していないと応用を利かせることはできません。

ぼく自身もググって見つけたサンプルコードを見ても、なぜ三角形になるのかがわかりませんでした。。。きちんと理解していきましょう。

CSSで三角形を作る

CSSで三角形を作るには、3つのステップを理解すると、わかりやすいです。

ボーダーのある四角形を作る
四角形の幅と高さを0にする
不要なボーダーを透明にする

1つずつ見ていきます。ここでは、下向きの三角▼を作ります。

１．ボーダーのある四角形を作る

ボーダーのある四角形を作ります。わかりやすいように、三角にする上ボーダーだけ色を変えています。

CSS

div {
  width:  40px;
  height:  40px;
  border: solid 20px  #cccccc;
  border-top: solid 20px  #666666; }

２．四角形の幅と高さを0にする

先ほど作った四角形の幅と高さを0にします。するとどうでしょう？三角形ができていますね！

ボーダーのある四角形の幅と高さを0とすると、ボーダーだけが残ります。この残ったボーダーが三角形になるのです。

また、ボーダーの幅が三角形の高さになっていることがわかります。

CSS

div { 
  width:  0px; 
  height:  0px; 
  border: solid 20px  #cccccc;
  border-top: solid 20px  #666666; 
}

３．不要なボーダーを透明にする

あとは上ボーダー以外の不要なボーダーを透明にすれば三角形の完成です。

CSS

div { 
  width:  0px; 
  height:  0px; 
  border: solid 20px  #cccccc;
  border-top: solid 20px  #666666; 
}

いろいろな形の三角形をつくる

CSSで三角形を作る仕組みがわかったところで、いくつか形を変えた三角形を作ってみます。

直角二等辺三角形

右ボーダーの幅を 0にしました。

CSS

div { 
  width:  0px; 
  height:  0px; 
  border-top: solid 20px  #666666;
  border-bottom: solid 20px transparent; 
  border-left: solid 20px transparent; 
  border-right: solid 0px transparent;  
}

直角三角形

上ボーダーの幅（三角形の高さ）より左ボーダーの幅を大きくしました。

CSS

div { 
  width:  0px; 
  height:  0px; 
  border-top: solid 20px  #666666;
  border-bottom: solid 20px transparent; 
  border-left: solid 40px transparent; 
  border-right: solid 0px transparent;  
}

鋭い三角形

transformプロパティをつかって、三角形を変形させてみます。 skewを使うと傾斜させることができます。

CSS

div { 
  width:  0px; 
  height:  0px; 
  border-top: solid 20px  #666666;
  border-bottom: solid 20px transparent; 
  border-left: solid 20px transparent; 
  border-right: solid 0px transparent; 
  transform: skew(-60deg,  0deg);
}