🧰業務効率化
CSS三角形・吹き出し作成
向きや枠線を調整してCSS図形を生成
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
CSSだけで作れる三角形と、矢印付きの吹き出しを画面で調整できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. 形の例を選ぶ
2. 形・向き・色を調整
3. プレビュー
ここに説明文や補足メッセージを入れます。
4. CSSコードをコピー
使うときのポイント
- 吹き出しの矢印は
::beforeと::afterで作成します。対象要素で同じ疑似要素を使っている場合は調整してください。 - 画面端では吹き出しがはみ出さないよう、配置する親要素の幅も確認してください。
- 文字を入れる場合は、背景色と文字色の見やすさも確認してください。