コーディング Web制作 CSS

【CSS】2種類の三角形の作り方(border、clip-pathを使う方法)

【CSS】2種類の三角形の作り方(border、clip-pathを使う方法)
CSSで三角形ってどうやって作るんだろう?

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

今回はclip-pathを使う方法と、borderを使う方法の2種類ご紹介していきます。

効率よくコーディングしたい人はこちら

clip-pathを使った三角形の作り方

まずはclip-pathを使った三角形の作り方になります。

後でご紹介する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>

次はcssです(レイアウトのためのcssは省略しています)

/* 共通のcss */
.triangle {
  background-color: #333;
  height: 50px;
  width: 50px;
}
/* 各方向のcss */
.triangle-top {
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.triangle-right {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.triangle-bottom {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.triangle-left {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

こちらの実際のコードになります。

See the Pen
三角形(clip-path)
by junpei (@junpei-sugiyama)
on CodePen.

三角形の形を変えたい場合はheightやwidthの数値を変えればOKです。

またborderと違いbackground-colorbackgroundlinear-gradientを使う事でグラデーションにする事も可能です。

 

擬似要素を使う

先ほどは空divを使いましたが、今度は擬似要素を使ってみたいと思います(レイアウトのためのcssは省略しています)

<div class="container">
  <div class="triangle-left">左に三角</div>
  <div class="triangle-right">右に三角</div>
</div>
/* 共通のcss */
.triangle {
  display: inline-block;
  height: 50px;
  position: relative;
  width: 50px;
}
/* 左に三角 */
.triangle-left::before {
  background-color: #333;
  bottom: 0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  content: "";
  height: 25px;
  left: -30px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 20px;
}
/* 右に三角 */
.triangle-right::before {
  background-color: #333;
  bottom: 0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  content: "";
  height: 25px;
  margin: auto;
  position: absolute;
  right: -30px;
  top: 0;
  width: 20px;
}

こちらが実際のコードになります。

See the Pen
三角形(clip-path:擬似要素)
by junpei (@junpei-sugiyama)
on CodePen.

borderを使った三角形の作り方

今度はborderを使った三角形の作り方になります。

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

<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を付けています。

.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の後に、それぞれプロパティを記述しています。

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

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

See the Pen
三角
by junpei (@junpei-sugiyama)
on CodePen.

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

仕組みを理解する

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

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

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

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

.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を使いましたが、今度は擬似要素を使ってみたいと思います(レイアウトのためのcssは省略しています)

<div class="container">
  <div class="triangle-left">左に三角</div>
  <div class="triangle-right">右に三角</div>
</div>
.triangle-left {
  display: inline-block;
  position: relative;
}
.triangle-left::before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #155493;
  bottom: 0;
  content: "";
  height: 0;
  left: -20px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
.triangle-right {
  display: inline-block;
  position: relative;
}
.triangle-right::before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #155493;
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  right: -20px;
  top: 0;
  width: 0;
}

こちらが実際のコードになります。

See the Pen
三角形(border:擬似要素)
by junpei (@junpei-sugiyama)
on CodePen.

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

上下方向は、

bottom: 0;

top: 0;

margin: auto;

この3つで中央にしています。

あとは文字の左側に表示させたいか右側に表示させたいかによってleftとrightを使い分けます。

 

今回ご紹介した方法以外にも三角形を作る方法はあるかも知れませんが、とりあえずこの2種類を覚えておけば大丈夫だと思います。

またこちらのサイトも参考になるかも知れないので一度見ておくといいかと思います。

CSS三角形作成ツール

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作, CSS