三角形CSSジェネレーター

CSSだけで三角形をつくるジェネレーターです。
モダンなclip-pathで作成する方法と、従来のborderで作る方法の2パターンから選択可能です。
ボーダー付きやグラデーション色の三角形も作成可能。
出力されるCSSコードをコピペで簡単に使えます。

clip-pathプロパティを使用しますか？（※変更するとカスタマイズ内容がリセットされます）

clip-pathを使用する

使用しない（borderで実装）

clip-pathプロパティは現在ではIEを除く主要ブラウザの全てでサポートされています。 (ブラウザ対応状況)
（※ clip-pathを使用する場合のみ、色をグラデーションに出来ます。）

プレビュー

CSSコード

.triangle {
  display: inline-block;
  width: 120px;
  height: 80px;
  background: #ff0000;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

使用上の注意

モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。

カスタマイズ