目次
CSS で三角形を作る方法といえば
border を透明にして作る方法 がもっとも有名ですよね。
しかし最近では、
border を使わずに三角形を作れるモダンな方法 が増えています。
clip-pathtransformlinear-gradientconic-gradient
この記事では、初心者でも使える 最新の三角形の作り方 をまとめて紹介します。
1. clip-path で作る三角形（最もおすすめ）
CSS の中でもっとも自由度が高く、レイアウト崩れも起きにくい方法です。
HTML
<div class="triangle-clip"></div>CSS
.triangle-clip {
width: 200px;
height: 200px;
background: #4087bf;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}特徴
- 色が自由
- サイズもそのまま変えられる
- レスポンシブに対応しやすい
2. transform を使う三角形（斜めカットを作る時に便利）
transform: skew を使い、四角形を斜めに変形させて三角形風の図形を作る方法です。
HTML
<div class="triangle-skew"></div>CSS
.triangle-skew {
width: 150px;
height: 150px;
background: #4087bf;
transform: skew(30deg);
}特徴
- 「完全な三角」ではなく、斜めカット効果として使いやすい
- セクションの区切りデザインなどに最適
3. linear-gradient で作る三角形（画像っぽく使える）
背景をグラデーションで塗りつぶし、透明部分を作って三角に見せる方法。
HTML
<div class="triangle-gradient"></div>CSS
.triangle-gradient {
width: 200px;
height: 200px;
background: linear-gradient(
to bottom right,
#4087bf 0%,
#4087bf 50%,
transparent 50%,
transparent 100%
);
}特徴
- セクションの仕切りに使いやすい
- 枠線や影をつけやすい
4. conic-gradient を使う三角形（円錐グラデの一部を利用）
conic-gradient は円を分割するグラデーションですが、角度を調整すれば三角形として使えます。
HTML
<div class="triangle-conic"></div>CSS
.triangle-conic {
width: 200px;
height: 200px;
background: conic-gradient(
#4087bf 0deg 120deg,
transparent 120deg 360deg
);
}特徴
- デザイン性の高い三角形が作れる
- 円グラフや矢印デザインに応用できる
どれを使えばいい？用途別おすすめ
| 方法 | 特徴 | おすすめ用途 |
|---|---|---|
| clip-path | 一番自由度が高い | 三角形を確実に作りたい時 |
| transform | 斜めカットが得意 | セクション区切り |
| linear-gradient | 画像風の三角 | 背景装飾 |
| conic-gradient | 角度調整が簡単 | 矢印や飾り図形 |
まとめ
- CSS では border を使わずに三角形を作る方法が増えている
- デザインに応じて
clip-pathやlinear-gradientを使うとより自由度アップ - レスポンシブでも扱いやすいのは clip-path が圧倒的におすすめ
あなたのデザインに合わせて、ぜひ使い分けてください！