UUUP Tools

デザインツール

ライブプレビュー付き CSS 三角形ジェネレーター

向き・サイズ・色を選ぶだけで、border を使った純粋な CSS 三角形を生成。ライブプレビューとコピー可能なコード付き。

クイック切替→CSSクリップパス
CSS三角形図形
クイック切替:CSSクリップパスCSS Ribbon ジェネレーター

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • ツールチップやポップオーバーの矢印を作る
  • コーナーバッジの装飾を生成する
  • CSS border 三角形のサイズを試す

使い方

  1. 三角形の向きを選ぶ
  2. 幅・高さ・色を設定する
  3. プレビューして CSS をコピーする

入出力サンプル

向き

top / 20px

出力

border-bottom-color: #...

FAQ

CSS の border 三角形はどのように動きますか？

要素の幅と高さを 0 にし、色付きと透明の border を組み合わせることで、見える三角形を作ります。

不規則な多角形も作れますか？

このツールは標準的な向きの三角形を生成します。より複雑な多角形には clip-path ツールを使ってください。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

CSSクリップパス

CSSクリップパス - 図形ジェネレーター

利用可能

preset と簡単な control から CSS clip-path の shape を生成し、live preview で確認できます。angled card、badge、画像 crop、装飾 layout に便利です。

CSS clip-path Shape
ツールを開く

CSS Ribbon ジェネレーター

CSS Ribbon ジェネレーター - コーナーバッジスタイル

利用可能

カード向けの斜めコーナーリボン CSS を視覚的に生成できます。テキスト、色、offset、width、font size を調整し、sale、sold-out などのステータスバッジを作れます。

CSS Badge Ribbon
ツールを開く