【Labs】CSSのborderプロパティで三角形

こんにちは（・∀・）

今回はCSSのborderプロパティを使って三角形を作ります。

作り方はサンプルを交えてご紹介いたしますがとても簡単です。

今までは画像や記号を使って実現していた三角形もCSSのborderプロパティで実現することができます。

Contents

1. borderを個別に指定
2. 右向きの三角形
3. いろいろな向きの三角形
4. 三角形を変形
5. 三角形の指定を簡単にする

borderプロパティで三角形

画像でも記号でもなくborderで三角形って？

とても簡単に作れます。サンプルをご覧ください。

1. borderを個別に指定

HTML

<span class="arrow1 demo1"></span>

CSS

.arrow1 {
  width: 0;
  height: 0;
  display: inline-block;
}
.demo1 {
  border-top: 50px solid #afc6e2;
  border-right: 50px solid #9fb7d4;
  border-bottom: 50px solid #e5bdd7;
  border-left: 50px solid #d49fc2;
}

Result

サンプルとCSSのコードを見ればピンときた方も多いのではないでしょうか。

そうです。残したい角度のborder以外、色を消してしまえばいいのです。

2. 右向きの三角形

例えば右向きの三角形を残したい場合...

HTML

<span class="arrow2 demo2"></span>

CSS

.arrow2 {
  width: 0;
  height: 0;
  display: inline-block;
}
.demo2 {
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #d49fc2;
}

Result

右向きの矢印を残したい場合はborder-left以外のborderの色をtransparentで透明にしてしまいます。

そうすると上記のような三角形ができあがります。

3. いろいろな向きの三角形

一周してみましょう。

HTML

<span class="arrow3 demo3-1"></span>
<span class="arrow3 demo3-2"></span>
<span class="arrow3 demo3-3"></span>
<span class="arrow3 demo3-4"></span>

CSS

.arrow3 {
  width: 0;
  height: 0;
  display: inline-block;
}
.demo3-1 {
  border-top: 50px solid #afc6e2;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}
.demo3-2 {
  border-top: 50px solid transparent;
  border-right: 50px solid #9fb7d4;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
}
.demo3-3 {
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #e5bdd7;
  border-left: 50px solid transparent;
}
.demo3-4 {
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #d49fc2;
}

Result

三角形を作る要素のwidthとheightは0に指定します。

三角形の大きさはborderで指定します。

4. 三角形を変形

次は三角形を変形してみましょう。

HTML

<span class="arrow4 demo4-1"></span>
<span class="arrow4 demo4-2"></span>

CSS

.arrow4 {
  width: 0;
  height: 0;
  display: inline-block;
}
.demo4-1 {
  border-top: 20px solid #afc6e2;
  border-right: 100px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 100px solid transparent;
}
.demo4-2 {
  border-top: 10px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 100px solid #d49fc2;
}

Result

細くしたり薄くするサイズの指定はborderでやります。

...ちなみに上記サンプルのように三角形を変形する必要がなければ次の書き方でも同じように表示されます。

5. 三角形の指定を簡単にする

HTML

<span class="arrow5 demo5"></span>

CSS

.arrow5 {
  width: 0;
  height: 0;
  display: inline-block;
}
.demo5 {
  border: 50px solid transparent;
  border-left: 50px solid #d49fc2;
}

Result

三角形を細くしたり、薄くしたり変形する必要がなければコードが少なくて済みます。

いかがでしたでしょうか、三角形がとても簡単にできますね。

三角形の矢印系はWebではよく使うので覚えておくと良いと思います。

関連リンク

【CSSリファレンス】border
【CSSリファレンス】border-color