CSSで四角形や三角形、矢印などをつくることができます。
今回は、矢印の代わりとしても使われている"三角形"をCSSでつくる方法を解説していきます。
CSSのさまざまなプロパティを用いて三角形を作ることができますが、今回は現場で使われている下記2点に絞って解説していきます
三角形を作る時に使われるプロパティ
- border
- clip-path
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
CSSで三角形をつくる方法：borderでつくる
まずはborderで三角形を作りますが、結論からいうと、以下のような記述で実現できます。
<div class="triangle"></div>.triangle {
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
border-bottom: 50px solid blue;
}表示結果
transparentは、透過の意味を指しています。border-bottomは、要素の下側のborderを指定するさいに使用します。
つまり、border-topにtransparentをあてれば、要素の上側のborderを透過することを意味します。
tansparentをあてれば、要素の上側のborderを透過することを意味します。
なのでborder-bottom以外のところは、transparentを当てているので透過されて、border-bottomだけ色を指定しているので表示のようになっている、ということです。
ここで、イメージしやすくするために、以下のようにCSSを適用してみましょう。
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-left: 50px solid green;
border-bottom: 50px solid blue;
}表示結果
上の表示結果のように、border-top,border-right,border-left,border-bottomに割り当てられた領域が可視化されました。
今度は試しに、左右のborderを透過してみましょう。
左右のborderを透過
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
}表示結果
左右のborderが透過、上下のborderのみ表示されました。ちなみにそれぞれのpxの値を変更するとさまざまな形に変更できます。
長方形を表示
.triangle {
width: 0px;
height: 0px;
border-top: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 100px solid green;
border-bottom: 200px solid blue;
}表示結果
topとrightのborderを透過し、border-leftを100px、border-bottomを200pxにすると、上のような半分色が違う四角形を形成できました。
台形のような形もつくることができます。
台形を表示
.triangle {
width: 0px;
height: 0px;
border-top: 0px solid transparent;
border-right: 100px solid yellow;
border-left: 50px solid transparent;
border-bottom: 100px solid blue;
}表示結果
CSSで三角形をつくる方法：clip-pathでつくる
clip-pathを用いると以下の記述で三角形を作ることができます。
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
background-color: blue;
}表示結果
三角形を描いている部分は、clip-pathの部分です。polygonの中身を解説すると、
- 最初の(0, 0)が左上の頂点
- （0%, 100%）が左下の頂点
- (100%, 50%)が右の頂点
となります。
もっとイメージしやすくするために、左下の頂点（0%, 100%）の部分の数字を弄ってみます。以下は、左下の頂点を(50%, 100%)に変更したものです。
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(0 0, 50% 100%, 100% 50%);
background-color: blue;
}
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(0 0, 100% 100%, 100% 50%);
background-color: blue;
}表示結果
左下の頂点がX軸の一番右側に移動しました。この移動した範囲も、widthとheightで指定した範囲内での移動になります。
ということは、左下の頂点を（100%, 100%）の後ろの100%はY軸での移動、ということになります。例えば、以下は左下の頂点を（0%, 50%）に変更してみます。
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(0 0, 0% 50%, 100% 50%);
background-color: blue;
}表示結果
今度は左下の頂点がY軸方向に移動しました。
この頂点の動きを理解できるようになると、容易に三角形をつくることができます。
CSSで三角形をつくるジェネレーターのご紹介
CSSで簡単に三角形をつくるジェネレーターサイトがありますので、そちらをつかって三角形をつくることもできます。
ジェネレーターサイトで三角形をつくるコードを作ったら、VSCodeなどのエディターにコピペするだけで簡単に作成できます。
まとめ
今回は三角形をborderとclip-pathを使って三角形をつくる方法を解説しました。
borderとclip-pathを使いこなすと、三角形以外の図形も作ることができるようになります。
borderとclip-pathを使いこなして見やすいサイトを作れるようになりましょう。
また、ジェネレーターサイトを使って簡単に図形を出力することもできるので、書き方を忘れた時や時間がない時は是非利用してみてください！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
