🔺
css triangle,
CSS三角形・矢印 ジェネレーター
borderプロパティだけで三角形・矢印を生成。
方向・サイズ・色を設定してCSSコードをコピー。
🔺
8方向対応
上下左右＋4斜め方向の三角形を生成
📋
CSSコード即コピー
生成コードをワンクリックでコピー
⚡
リアルタイムプレビュー
パラメータ変更で即プレビュー更新
px
px
プレビュー
100px × 80px
生成コード
CSS
about,
概要
CSS三角形・矢印ジェネレーターは、CSSのborderプロパティを使ったテクニックで三角形を生成し、コードをワンクリックでコピーできるツールです。上下左右＋斜め4方向の計8方向に対応しています。
画像を使わずに吹き出しの尖り、ドロップダウンメニューの矢印、カルーセルのナビゲーション矢印などのUI装飾パーツを作成できます。生成されるCSS・HTMLコードはそのままプロジェクトにペーストするだけで使用できます。
すべての処理はブラウザ内のCSS文字列生成で完結し、外部サーバーへの通信は一切ありません。
how to,
使い方
STEP 1
方向を選択
3×3のグリッドから三角形の向きを選択します。中央以外の8方向すべてに対応しています。
STEP 2
パラメータを調整
幅・高さのスライダーとカラーピッカーで三角形の形状と色を調整します。プレビューがリアルタイムで更新されます。
STEP 3
コードをコピー
「CSSをコピー」または「HTMLをコピー」ボタンでコードをクリップボードにコピーしてプロジェクトに貼り付けます。
glossary,
用語集
- border trick
- CSSのborderプロパティで「width: 0; height: 0」の要素にborderを設定し、三角形を表現するテクニック。IE6以来使われている古典的な手法。
- transparent
- CSS色値で透明を指定するキーワード。三角形の不要な辺を透明にして三角形の形状を作り出す。
- clip-path
- CSS3のプロパティで要素の表示領域を切り抜く。borderテクニックの代替手段で、より柔軟な形状に対応するが、古いブラウザでは非対応。
- 吹き出し（スピーチバブル）
- チャットUIやツールチップで使われるバルーン型の装飾。三角形がメッセージの指し示す方向を示す「尾」の部分を構成する。
- ドロップダウン矢印
- セレクトボックスやアコーディオンの開閉を示す小さな三角形アイコン。borderトリックで実装されることが多い。
- 擬似要素（::before/::after）
- 吹き出し全体を実装する際、三角形部分に::before/::afterを使って本体と三角形を分離するのが一般的なパターン。
faq,
FAQ
- Q.clip-pathとborderの三角形、どちらが良いですか？
- borderテクニックはIE11含む古いブラウザでも動作する利点があります。clip-pathはより柔軟な形状に対応しますが、一部古いブラウザでは非対応です。現代的なプロジェクトではどちらでも問題ありません。
- Q.正三角形は作れますか？
- 幅と高さの比率を調整することで近似できます。上向きの正三角形は「幅=高さ×2」が目安です。
- Q.入力内容はサーバーに送信されますか？
- いいえ。すべてブラウザ内のCSS文字列生成で完結します。外部通信はありません。
- Q.レスポンシブ対応の三角形は作れますか？
- 生成コードのpxをem/remやvwに手動で置き換えることで対応可能です。
- Q.吹き出し全体のCSSも生成できますか？
- 本ツールは三角形部分のCSS生成に特化しています。吹き出し全体は三角形と::before/::afterを組み合わせて実装します。
use cases,
活用シーン
💬
チャットUIの吹き出しデザイン
メッセージバルーンの「尾」部分に三角形を使って、自然な吹き出しデザインを実現します。
📂
アコーディオンメニューの矢印
ドロップダウンやアコーディオンの開閉を示す下向き/上向き三角形の実装に最適です。
🎨
ドロップダウントグル矢印
カスタムセレクトボックスやナビゲーションのトグル矢印をpureCSS で実装できます。
🖼️
カルーセルのナビゲーション
画像ギャラリーやスライダーの前後移動ボタンに使う左右向きの矢印を生成します。