CSS三角形生成器
CSSのborderプロパティで三角形を生成するツール。 上下左右・斜め8方向に対応し、サイズと色を自由に指定できる。
方向
10px200px
10px200px
プレビュー
CSSコード
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #3B82F6;
このツールをシェア
📖
使い方
Step 1
方向選択
三角形の向きを選択
→
Step 2
サイズ調整
サイズと色を調整
→
Step 3
コピー
CSSコードをコピーして使用
✨
このツールの特徴
8方向対応
上下左右と斜め4方向の三角形
サイズ自由
幅と高さを個別に指定可能
リアルタイムプレビュー
変更がリアルタイムでプレビューに反映
❓
よくある質問
borderの幅を利用して三角形を描画するCSS技法です。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。