CSS三角形作成

CSS Triangle Generator

三角形のスタイルを自由自在にCSSコードとしてコピペできるツールです。形（正三角形・直角三角形・カスタム）や向き（上・右・下・左）を選び、サイズや色をリアルタイムで調整するだけで、画面には即座にプレビューが表示されます。コードに悩まずサクッと三角形を作りたいあなたにぴったりのツールです。

コラム・豆知識
ツールの仕組み解説

三角形の形状自由形状正三角形直角二等辺三角形

カラー

頂点の位置上右下左

サイズ px

底辺 px 高さ px

擬似要素として生成

コピー

コラム・豆知識

CSS三角形の基本原理と作り方

CSSで三角形を作成する基本的な方法は、borderプロパティを利用することです。
幅と高さが0の要素に対して、特定の方向のボーダーだけ色をつけ、残りを透明にすることで三角形が形成されます。
例えば、width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000;で下向きの三角形が作れます。

多方向の三角形と回転での応用

四方向のborderを組み合わせることで、上下左右それぞれの向きの三角形が作成可能です。
さらに、transform: rotate(45deg);などを使って角度を変えたり、複数の三角形を組み合わせて矢印や吹き出しの形状に応用することも一般的です。
これにより、画像を使わずに軽量で拡張性の高い装飾が実現できます。

レスポンシブデザインでのサイズ調整方法

三角形のサイズはボーダーの幅と高さで決まるため、%やvw、vhなど相対単位を用いるとレスポンシブ対応が可能です。
ただし、複雑な比率調整が必要な場合はメディアクエリでサイズを細かく制御することも検討しましょう。
CSS変数を利用して一元管理するとメンテナンス性が向上します。

アクセシビリティと視認性のポイント

三角形は装飾として用いられることが多いですが、矢印など機能的な要素に使う場合は意味的に補完が必要です。
例えば、aria-hidden="true"を付与してスクリーンリーダーから除外したり、代替テキストを用意するなど配慮が求められます。
また、色のコントラストにも注意し、視認性を確保しましょう。

パフォーマンスと互換性について

CSS三角形は純粋なCSSで描画されるため画像より軽量で高速です。
また、ほとんどのモダンブラウザで完全にサポートされており、互換性の心配がほぼありません。
ただし、古いブラウザや特殊な環境ではボーダーの解釈が異なる場合があるため、検証ツールでの動作確認は必須です。

ツールの仕組み解説

// 三角形の位置や形を選択したら、プレビューを更新するイベント
positionRadios.forEach(el => {
	el.addEventListener('change', updateTriangle);
});

ここでは、「三角形の位置」を選んだら即座に画面の三角形プレビューを変えるためにイベントを設定しています。ユーザー操作に応じて動的に見た目を変えたいので、リアルタイム更新が重要です。

// 三角形の形に応じて入力欄の表示切り替え
function updateInputVisibility() {
	const selectedShape = document.querySelector('input[name="shape"]:checked').value;
	if (selectedShape === 'equilateral' || selectedShape === 'rightAngled') {
		sizeInputs.style.display = 'block'; baseHeightInputs.style.display = 'none';
	} else {
		sizeInputs.style.display = 'none';
		baseHeightInputs.style.display = 'block';
	}
}

三角形の種類によって、必要な入力値が違います。正三角形や直角三角形は「辺の長さ」だけあればいいですが、カスタム三角形は「底辺」と「高さ」が必要です。だから入力フォームの表示を切り替えてわかりやすくしています。

// clip-path用の三角形座標を形状と位置によって計算する関数
function calculateClipPathPoints(selectedPosition, selectedShape, triangleSize, triangleBase, triangleHeight) {
	let points = []; if (selectedShape === 'equilateral') {
		switch (selectedPosition) {
			case 'top': points = [[50, 0], [100, 100], [0, 100]];
			break;
			// 以下省略...
		}
	}
	// 右角形やカスタム形状も同様に処理
	return points;
}

CSSのclip-pathで三角形を作るために、三角形の頂点の座標を計算しています。形状と向きにより頂点位置が変わるので、それぞれの場合分けをして正確な形を描くためです。

// borderで三角形を表現するために、各辺の幅と色を計算
if (selectedShape === 'equilateral') {
	const side = triangleSize;
	const height = Math.sqrt(3) / 2 * side;
	switch (selectedPosition) {
		case 'top': borderLeft = side / 2;
		borderRight = side / 2;
		borderBottom = height; break;
		// 以下省略...
	}
}

三角形をCSSのborderトリックで作るとき、三角形の形状と位置に合わせてボーダーの幅を計算しています。これは三角形の大きさや向きを忠実に表現するために必要な処理です。

// 三角形プレビューの色とサイズをborderプロパティで動的に設定
trianglePreview.style.borderTopWidth = `${formatNumber(borderTop)}px`;
trianglePreview.style.borderTopColor = selectedPosition === 'bottom' ? selectedColor : 'transparent';
// 他の辺も同様に設定

計算したボーダーの幅と色を実際にプレビュー要素に設定し、選択に合わせてリアルタイムに見た目を変えています。これによりユーザーは結果をすぐに確認できます。

// clip-pathとborder両方のCSSコードを生成し画面に出力
borderOutput.textContent = "/* Border方式 */\n" + borderCSS;
clipPathOutput.textContent = "/* Clip-path方式 */\n" + clipPathCSS;

2つの方法で三角形を作るCSSコードを同時に生成し表示しています。