CSS 三角形ジェネレーター

古典的な境界線のトリックを使用して CSS 三角形を生成します。方向、サイズ、色を設定して、スニペットをコピーします。

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

境界線のトリック (方向、サイズ、色) を使用して CSS 三角形を生成します。
ブラウザで実行
無料で使用できます

使い方

三角形の方向を選択します。
サイズと塗りつぶしの色を設定します。
CSSをコピーします。

How this tool works

三角形の方向を選択します。
サイズと塗りつぶしの色を設定します。
CSSをコピーします。

Recommended settings

最初はデフォルトのオプションを使用し、必要に応じて調整します

Supported formats

Text / on-page input

File size and limits

非常に複雑なマルチレイヤーのプレビューは、古い携帯電話では遅く感じる場合があります。

Privacy

カラーおよび CSS ジェネレーターは完全にブラウザー内で実行されます。プレビューと変換ではスタイルがアップロードされることはありません。

Common use cases

必要に応じて CSS Triangle Generator を使用します。方向、サイズ、色などの境界線のトリックを使用して CSS 三角形を生成します。

Troubleshooting

貼り付け後のプレビューの見た目が変わる

ページ上に競合する CSS がないか確認します (リセット、継承された色)。まず、生成されたルールを分離されたスタイルシートにコピーします。

よくある質問

これで CSS がアップロードされますか?

いいえ。ジェネレーターとコンバーターは、ライブプレビューを使用してブラウザーで実行されます。

アカウントは必要ですか?

いいえ。ツールを開いてコントロールを調整し、CSS をコピーします。