今回は、「CSSで三角形を実装する方法」について紹介したいと思います。

三角形は画像で書き出さなくてもCSSで簡単に作成できるので、是非参考にしてください。

CSSで三角形を実装する方法

完成形はこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

全方向の三角形を作成しました。

HTML

<div class="triangle triangle-top"></div>
<div class="triangle triangle-right"></div>
<div class="triangle triangle-bottom"></div>
<div class="triangle triangle-left"></div>

三角形に対して共通で当てたいクラスを「triangle」と命名。

そして、上向きの三角形を作るためのクラスを「triangle-top」、右向きを「triangle-right」、下向きを「triangle-bottom」、左向きを「triangle-left」とそれぞれ命名しました。

CSS

.triangle {
  height: 0;
  width: 0;
}
.triangle-top {
  border-right: 50px solid transparent;
  border-bottom: 50px solid #000;
  border-left: 50px solid transparent;
}
.triangle-right {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #000;
}
.triangle-bottom {
  border-top: 50px solid #000;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.triangle-left {
  border-top: 50px solid transparent;
  border-right: 50px solid #000;
  border-bottom: 50px solid transparent;
}
ま

三角形は全て高さと幅を0にします。

そして、後でboderを使って三角形に形作っていくことにしましょう。

上向きの三角形を作るには、border-top以外に値を指定します。

右向きの場合は、border-right以外に値を指定します。

下向きの場合は、border-bottom以外に値を指定します。

左向きの場合は、border-left以外に値を指定します。

数値は変更できるので、ご自由に変更してみてください！

まとめ

以上が、「CSSで三角形を実装する方法」でした。