ぶろぐらまー

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

三角形
こんにちは!きっしーです。

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

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

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

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

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

CSSで三角形を作る

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

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

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

1.ボーダーのある四角形を作る

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

CSS

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

2.四角形の幅と高さを0にする

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

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

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

CSS

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

3.不要なボーダーを透明にする

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

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);
}

まとめ

CSSを使った三角形の作り方を紹介しました。見出しや吹き出しに役立つこと間違いなしです。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

SPONSORED LINK
SPONSORED LINK