CSSで出来る三角形の作り方

CSS


こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

CSSで三角形ってどうやって作るんだろう?

 

 

といった方に対する記事となります。

ホームページやLPでは次の項目へという意味で三角形が使われることが良くあります。

今回はCSSを使って三角形を作る方法を解説していきます。

 


borderを使う

 

CSSで三角形を作るにはborderを使います。

borderは線なので、線で三角形を作る?と思うかも知れませんが、まずはコードを見てみましょう。

 

<!-- 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>

 

HTMLは上から上向きの三角、右向きの三角、下向きの三角、左向きの三角となっています。

それぞれ別のclassと共通のclassを付けています。

 

<!-- css -->
.triangle {
  height: 0;
  width: 0;
}
.triangle-top {
  border-right: 30px solid transparent;
  border-bottom: 30px solid #000;
  border-left: 30px solid transparent;
}
.triangle-right {
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #000;
}
.triangle-bottom {
  border-top: 30px solid #000;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
}
.triangle-left {
  border-top: 30px solid transparent;
  border-right: 30px solid #000;
  border-bottom: 30px solid transparent;
}

 

CSSはまず共通となる.triangleの後に、それぞれプロパティを記述しています。

プロパティも分かりやすいように上右下左の順に書いています(いつもはアルファベット順に書いています)

そしてこちらが結果となります。

 

ただこれだけではなぜborderで三角が出来るのか不思議に思うかもしれないので、その理由を解説します。

 

仕組みを理解する

 

先ほどのプロパティにあったtransparentは透明という意味になります。

ここでまず全ての方向に対して色を付けてみたいと思います。

分かりやすいように方向によって色も変えました。

コードは次のようになっています。

<!-- css -->
.triangle-left {
  border-top: 30px solid #ff7f7f;
  border-right: 30px solid #ffa500;
  border-bottom: 30px solid #7fff7f;
  border-left: 30px solid #4169e1;
}

 

これだけではまだborderっぽさがないので、heightとwidthを0から100pxにしてみます。

少しborderっぽさが出てきました。

この画像を見ると分かりますが、borderとborderの設置面が斜めになっています。

三角形はこの特長を利用して作っています。

ちなみにborderの太さを30pxから1pxにするとこのようになります。

ほとんど線ですが、よーーく見るとborderとborderの設置面は斜めになっています。

さらに通常は全て同じ色なので斜めの設置面は分からないだけですね。

 

それでは最初の画像に戻ります。

最初の画像では全ての方向に色がついていましたが、左向きの三角にしたいと思います。

まずは上方向の色を透明にします。

あとは同じように左と下を透明にします。

これで完成です。

また左に関しては透明ではなく何も書かなくても大丈夫です(最初の例では書いていません)

ただ「透明」と「なし」の違いがあるので、位置はその分変わります。

また上下は何も書かないのはNGで、透明にしておく必要があります。

例えば下を何も書かないとこのようになります。

ただこういう三角形を作りたいのであれば問題ありません(ここでは左向きの三角を作りたい場合の話です)

 


擬似要素を使う

 

先ほどは空divを使いましたが、今度は擬似要素を使ってみたいと思います。

<!-- html -->
<section>
  <h1 class="triangle-right">左に三角</1>
</section>

 

<!-- css -->
section {
  text-align: center;
}
.triangle-right {
  display: inline-block;
  position: relative;
}
.triangle-right:before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #155493;
  content: "";
  left: -20px;
  position: absolute;
}

 

ここでは画面の真ん中に表示させたかったので、sectionにtext-align: center;を書いています。

三角形の作り方自体は同じです。

ここでは文字と三角の間を空けるために、三角を左に20px移動しています。

もし縦位置を変えたい時はtopやbottomを書けばOKです。

また右側に表示させたい時はbeforeをafterにすれば良さそうですが、上記の例で言えば.triangle-rightの絶対位置から左に20pxとしているので、このままafterに変えても三角の位置は変わりません。

同じように右側に文字との間を空けて表示させたければ、beforeをafterにしてleftをrightにすればOKです。

この辺の位置調整はデベロッパーツールを使った方が分かりやすいかも知れません。

以上です。