CSS Triangle Generator 🔺

CSSで三角形を作る際のサイズ、色、方向を直感的に調整し、リアルタイムでプレビューとCSSコード生成を行うWebツール。

使い方

1. 三角形の方向を選択（▲上 ▶右 ▼下 ◀左）
2. 幅と高さをスライダーまたは数値入力で調整
3. カラーピッカーで色を選択
4. リアルタイムプレビューを確認
5. 生成されたCSSコードをコピーボタンでクリップボードにコピー

特徴

• 4方向対応（上・下・左・右）
• スライダーと数値入力の同期
• カラーピッカー + HEX入力
• リアルタイムプレビュー
• ワンクリックコードコピー
• PWA対応（インストール可能）
• オフライン利用可能

技術スタック

• HTML5, CSS3, Vanilla JavaScript
• PWA (Service Worker + manifest.json)

マネタイズ

PWA + 投げ銭（Buy Me a Coffee / Ko-fi）