【初心者向け】CSSの疑似要素でbefore・afterを使って三角形を作る方法！形別に徹底解説

▼ CSSで三角形を作る基本の考え方

三角形は、ボーダー（border）を使って四角形の対角を削るような仕組みで作ります。透明なborderと、色付きのborderを組み合わせることで、見た目が三角形になります。

① 基本の上向き三角形（▲）

.triangle-up::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid black;
}

② 下向き三角形（▼）

.triangle-down::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
}

③ 左向き三角形（◀）

.triangle-left::before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}

④ 右向き三角形（▶）

.triangle-right::after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}

⑤ 吹き出しの矢印（三角形＋四角）

HTML

<div class="balloon">
コメントテキスト
<span class="arrow"></span>
</div>

CSS

.balloon {
position: relative;
background: #eee;
padding: 10px;
border-radius: 5px;
width: fit-content;
}

.arrow::after {
content: "";
position: absolute;
bottom: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #eee;
}

⑥ 矢印風（三角形＋ライン）

HTML

<div class="arrow-box">次へ</div>

CSS

.arrow-box {
display: inline-block;
padding: 10px 20px;
background: #333;
color: #fff;
position: relative;
}

.arrow-box::after {
content: "";
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #333;
}

⑦ 正三角形・二等辺三角形を調整するには？

borderの幅（px）を工夫するだけで、角度を変えた三角形も作れます。

.isosceles {
content: "";
display: block;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid orange;
}

⑧ 斜めの三角形もできる？

可能です！上下左右だけでなく、斜めに配置することでアイコンや装飾にも使えます。

.diagonal::before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 30px solid purple;
}

これは、右上に向いた小さな三角形になります。

応用編：beforeとafterの両方を使って矢印を作る

.double-arrow::before,
.double-arrow::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 10px solid transparent;
}

.double-arrow::before {
border-right: 10px solid black;
left: -20px;
}

.double-arrow::after {
border-left: 10px solid black;
right: -20px;
}

まとめ：三角形はborderと疑似要素で自由自在！