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

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

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

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

完成形はこちら。

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

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

HTML

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

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

CSS

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

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

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

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

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

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

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

まとめ

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

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事