CSSで三角形を作る方法をわかりやすく紹介！

2023年1月31日2024年1月8日

cssで三角形を作る方法が知りたい

この記事は上記の課題に向けて作成しています。

cssで三角形を作るのが面倒だからと画像を使っていませんか？

実はcssでは簡単に三角形が作れます。

cssで三角形を作ったことの無い方はこの記事を参考にしてください。

この記事を読むメリット

CSSで三角形を作る方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です！

都内制作会社でwebデザイナー・webディレクターとして勤務
webデザイナー3年、webディレクター1年目
web制作現場で学んだことを発信している人

CSSで三角を作る方法

早速cssで三角形を作る方法を紹介します。

使用するcssは「borderプロパティ」です。

今回紹介する三角形は4つです。

紹介する4つの三角形

CSSで上向三角形を作る方法
CSSで下向三角形を作る方法
CSSで右向三角形を作る方法
CSSで左向三角形を作る方法

それぞれ説明していきます。

CSSで上向三角形を作る方法

1つ目は上向の三角形です。

まずは完成系をお見せします。

完成系の三角形

このような三角形を作ります。

使用したHTMLコード

 <div class="triangle"></div>

使用したCSSコード

.triangle {
 width: 0px;
 height: 0px;
 border-top: 50px solid transparent;
 border-right: 50px solid transparent;
 border-left: 50px solid transparent;
 border-bottom: 100px solid blue;
 margin:0px auto;
}

①CSSで4つの三角形を作る

上記のコードを説明します。

まずは「border」プロパティの四方に三角形を作ります。

「border」で作った4つの三角形

使用したHTMLコード

<div class="triangle"></div>

使用したCSSコード

.triangle {
 width: 0px;
 height: 0px;
 border-top: 100px solid green;
 border-right: 100px solid yellow;
 border-left: 100px solid red;
 border-bottom: 100px solid blue;
 margin:0px auto;
}

「border-top」、「border-left」、「border-right」、「border-bottom」にそれぞれ設定します。すると4つの三角形が出来ます。

②不要な三角形を透明にする

続いて不要な三角形を透明にします。

今回の場合だと「赤」「緑」「黄色」の3つの三角形が不要になります。

不要の三角形に透明の「transparent」を設定します。

3つの三角形を透明に設定

「赤」「緑」「黄色」の3つの三角形が透明になりました。

使用したHTMLコード

 <div class="triangle"></div>

使用したCSSコード

.triangle {
 width: 0px;
 height: 0px;
 border-top: 100px solid transparent;
 border-right: 100px solid transparent;
 border-left: 100px solid transparent;
 border-bottom: 100px solid blue;
 margin:0px auto;
}

③形を整える

最後に形を整えます。

透明にしている3つの三角形の幅を1/2にします。

すると先ほど見せた三角形が完成します。

完成した三角形

使用したHTMLコード

<div class="triangle"></div>

使用したCSSコード

.triangle {
 width: 0px;
 height: 0px;
 border-top: 50px solid transparent;
 border-right: 50px solid transparent;
 border-left: 50px solid transparent;
 border-bottom: 100px solid blue;
 margin:0px auto!;
}

上向三角形を作る方法は以上です。

CSSで下向三角形を作る方法

続いては下向三角形を作る方法を説明します。

作り方は先ほど同様で下向き三角形以外を透明にします。

完成した三角形

使用したHTMLコード

<div class="triangle"></div>

使用したCSSコード

.triangle {
 width: 0px;
 height: 0px;
 border-top: 100px solid blue;
 border-right: 50px solid transparent;
 border-left: 50px solid transparent;
 border-bottom: 50px solid transparent;
 margin:0px auto;
}

今回は「right」「left」「bottom」の3つを透明にしました。

CSSで右向三角形を作る方法

右向きの三角形を作る方法です。

右向き以外の三角形を透明に設定します。

完成した三角形

使用したHTMLコード

<div class="triangle"></div>

使用したCSSコード

.triangle {
 width: 0px;
 height: 0px;
 border-top: 50px solid transparent;
 border-right: 50px solid transparent;
 border-left: 100px solid blue;
 border-bottom: 50px solid transparent;
 margin:0px auto;
}

CSSで左向三角形を作る方法

左向きの三角形を作る方法です。

左向き以外の三角形を透明に設定します。

完成した三角形

使用したHTMLコード

<div class="triangle"></div>

使用したCSSコード

.triangle {
 width: 0px;
 height: 0px;
 border-top: 50px solid transparent;
 border-right: 100px solid blue;
 border-left: 50px solid transparent;
 border-bottom: 50px solid transparent;
 margin:0px auto;
}