CSSのborderを使わないでclip-pathで三角形を作る方法【CSS】

最終更新日：2025-02-03

公開日：2025-02-03

ページ内に広告が含まれています。

みなさんはCSSで三角形を作成する時はどのように作成しているでしょうか?
少し前まではborderプロパティで作成するのが一般的ではありましたが、今はclip-pathプロパティでの作成が多いようです。
今回は、このclip-pathプロパティを使用して三角形を作る方法を解説していきます。

borderプロパティを使った今までの三角形の作り方
clip-pathプロパティについて
clip-pathプロパティを使った三角形の作り方
その他多角形などの作り方
各種ジェネレーターの紹介
さいごに

borderプロパティを使った今までの三角形の作り方

冒頭で紹介したように、今まではborderプロパティを使用して三角形を作るのが一般的でした。
borderプロパティで三角形を作る場合は以下のようになります。

.triangle {
    width: 0px;
    height: 0px;
    margin: 0 auto;
    border-top: 25px solid transparent;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
    border-bottom: 50px solid #8FC051;
}

上記のように、borderの3辺を透明にして疑似的に三角形を作る方法です。
これだとCSSが分かり難く、上記の場合だと上に余白のように透明の部分が出来てしまう為、レイアウトを合わせるのも少し大変です。
こういった苦労も無く、CSSもすっきりさせられるclip-pathプロパティを使用した三角形の作り方を解説していきます。

clip-pathプロパティについて

clip-pathプロパティは、要素のどの部分を表示するかを設定する「クリッピング領域」を指定できるプロパティです。
領域の内部は表示され、領域の外部は非表示となります。これを使用する事で、様々な形で表示が出来るようになります。

clip-pathプロパティで利用できる値は以下のとおりです。

inset()

4つの座標を定義して長方形を作成できる

circle()

半径と中心位置を定義して正円を作成できる

ellipse()

2つの半径と一を定義して楕円形を作成できる

polygon()

x軸とy軸を1セットとして、複数セットを定義し多角形を作成できる

他にもpath()・rect()・shape()・xywh()というのがありますが、使用する機会はほとんど無いかと思うので割愛させていただきます。上記の中で、三角形を作成するにはpolygon()を使用します。

また、clip-pathプロパティはIEには対応していませんので、IEでの対応が必要な場合はborderプロパティを使用して作成してください。各ブラウザの対応状況はこちらで確認できます。

clip-pathプロパティを使った三角形の作り方

clip-pathプロパティの値であるpolygon()を使用して三角形を作成しますが、作成するにはx軸・y軸を1セットとして3セットを定義する必要があります。x軸は左が0%・右が100%、y軸は上が0%・下が100%となります。
以下に作成例をいくつか紹介します。

<div class="container">
    <div class="triangle1"></div>
    <div class="triangle2"></div>
    <div class="triangle3"></div>
    <div class="triangle4"></div>
</div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.container div {
    background-color: #8FC051;
}
.triangle1 {
    width: 32px;
    height: 40px;
    clip-path: polygon(0 0, 100% 50%, 0% 100%);
}
.triangle2 {
    width: 40px;
    height: 32px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.triangle3 {
    width: 32px;
    height: 40px;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.triangle4 {
    width: 40px;
    height: 32px;
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

このように、borderプロパティとは違い指定がしやすく簡単に三角形が作成できます。
三角形の大きさはwidthとheightで指定出来るのでこちらも簡単です。

その他多角形などの作り方

polygon()を使用すると、三角形だけではなくいろいろな形を作成できます。
例として、五角形、星形、矢印を作成してみました。

<div class="container">
    <div class="pentagon"></div>
    <div class="star"></div>
    <div class="arrow"></div>
</div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.container div {
    background-color: #8FC051;
}
.pentagon {
    width: 60px;
    height: 60px;
    clip-path: polygon(50% 0, 0 40%, 20% 100%,80% 100%, 100% 40%, 50% 0);
}
.star {
    width: 60px;
    height: 60px;
    clip-path: polygon(50% 0, 65% 35%, 100% 35%, 70% 60%, 80% 100%, 50% 75%, 20% 100%, 30% 60%, 0% 35%, 35% 35%);
}
.arrow {
    width: 60px;
    height: 60px;
    clip-path: polygon(0 30%, 0 70%, 50% 70%, 50% 100%, 100% 50%, 50% 0, 50% 30%);
}

このように様々な形状を作成できますので、ぜひ試してみてください。