CSS で三角形を作る方法
最終更新日 - 公開日 2017.04.20
by
CSS で三角形を作る方法を紹介します。
例えば、画像を使わずに三角形を作りたいときや、CSS だけで吹き出しの先っちょを作りたいときに便利な方法です。
この投稿では clip-path を使った方法と border を使った方法を紹介しています。
テキストリンクなどの添え物であれば border 、中〜大きめなデザインのアクセントには clip-path がおすすめです。
- clip-path で三角形を作る方法
- border で三角形を作る方法
- Grid で三角形を作る方法
- Transform で三角形を作る方法
- Before/After Pseudo-elements で三角形を作る方法
clip-path で三角形を作る方法
CSS で三角形を作るには、CSS セレクタの clip-path を利用することで実現できます。
実際の見た目はこんな感じです。
ベースの HTML は次の通りです。
<div class="triangle"></div>
上向き三角形を作るときの CSS の指定はこちら。
.triangle{
width: 50px;
height: 50px;
background-color: #E91E63;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
各方向だけの指定はこちら。
.top{
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.right{
clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.bottom{
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.left{
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
clip-path は、要素の大きさをベースに、指定した図形の形で描画エリアをマスクすることができます。この機能を使い、図形で三角形を描画して、その形で要素を切り取ってみせることで三角形を作ることができます。
例えば、上向きの三角形の場合、clip-path に三点の座標を指定します。
スタートは左下（x0,y100%）、次に上部中央（x50%,y0）、最後に右下（x100%,y100%）。
後半に紹介する border を使った方法との違いは、指定が簡単、三角形以外も作れる、単色以外塗りも可能（例えばグラデーション）、画像が使える点が特徴です。
デメリットとしては、古いブラウザーでは対応してない点が挙げられますが、現状の対応状況を見る限りでは気にする必要はないかと思います。
気になる方は clip-path の対応状況をこちらでご確認ください。
正三角形で作る場合
紹介している方法では正三角形ではなく、少し伸びた形になるため、正三角形で作りたい場合は、要素の大きさの比率を 100：86 ほどに調整して対応してください。
三角形以外の図形を作るときは、外部サービスの「Clippy — CSS clip-path maker」などを利用すると便利です。
border で三角形を作る方法
clip-path 意外にも、CSS セレクタの border を使うことで三角形を作ることができます。
実際の見た目はこんな感じです。
ベースの HTML は次の通りです。
<div class="triangle"></div>
下向きの三角形を作るときの CSS の指定はこちら。
.triangle {
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #E91E63;
}
ボーダーは上下左右で交わる箇所が斜めに表示されるので、その特性を利用して三角形を表現します。
使用するのはボーダー要素だけなので width と height を 0 にします。
続いてボーダーサイズとカラーを指定、サイズは任意の値を入れてください。
カラーは一旦 transparent（透明）を指定します。
次に、三角形の向きに合わせてカラーを指定します。
下向きの三角形場合はボーダートップにカラーを指定します、これで完成です。
ボーダーのサイズを上下左右で異なる数値を設定すると、変則的な形の三角形を作ることも可能です。
Grid で三角形を作る方法
CSSで三角形を作るには、Gridを利用することで実現できます。実際の見た目はこんな感じです。
ベースのHTMLは次の通りです。
<div class="triangle-grid"></div>三角形を作るときのCSSの指定はこちら。
.triangle-grid {
width: 100px;
height: 100px;
display: grid;
grid-template-columns: 1fr 1fr;
background: linear-gradient(to top right, transparent 50%, red 50%);
}CSS Gridを使用して、要素をグリッドとして配置し、背景にグラデーションを設定することで三角形を作成します。
Grid で三角形を作る方法のメリットとデメリット
メリット
・シンプルなコードで三角形を作成できる。
・縦横比が簡単に調整できる。
・モダンなレイアウト手法と組み合わせやすい。
デメリット
・グリッドの設定が少し複雑に感じることがある。
・古いブラウザではサポートされていない可能性がある。
Transform で三角形を作る方法
Transformプロパティを利用して、要素を回転させることで三角形を作成することができます。実際の見た目はこんな感じです。
ベースのHTMLは次の通りです。
<div class="triangle-transform"></div>三角形を作るときのCSSの指定はこちら。
.triangle-transform {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
transform: rotate(45deg);
}Transformプロパティを使用して要素を回転させることで、視覚的に多様な形を作成できます。
Transform で三角形を作る方法のメリットとデメリット
メリット
・アニメーションや回転効果を簡単に追加できる。
・視覚的に多様な形を作成しやすい。
デメリット
・要素のサイズを調整するのが難しい場合がある。
・複雑な形状を作成する際には、計算が必要となることがある。
Before/After Pseudo-elements で三角形を作る方法
擬似要素を使用して三角形を作成することもできます。実際の見た目はこんな感じです。
ベースのHTMLは次の通りです。
<div class="triangle-pseudo"></div>三角形を作るときのCSSの指定はこちら。
.triangle-pseudo {
position: relative;
width: 0;
height: 0;
}
.triangle-pseudo::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
擬似要素を使用して、スタイルシートのみで三角形を作成します。
Before/After Pseudo-elements で三角形を作る方法のメリットとデメリット
メリット
・追加のHTML要素を作成する必要がない。
・スタイルシートのみで三角形を作成できる。
デメリット
・擬似要素の位置やサイズの調整が難しいことがある。
・複数の三角形を使用する場合、コードが複雑になることがある。
まとめ
CSS で三角形を作る方法を紹介しました。
一般的に border を使った方法が主流でしたが、対応ブラウザーが増えたことで clip-path を使用する機会も今後増えそうです。
