矢印CSSジェネレーター
CSSだけで矢印をつくるジェネレーターです。
出力されるCSSコードをコピペで簡単に使えます。
スポンサーリンク
作成する矢印のタイプを選択してください（※変更するとカスタマイズ内容がリセットされます）
（シンプルな三角形については、三角形CSSジェネレーターをご利用ください。）
カスタマイズ
プレビュー
CSSコード
.arrow {
display: inline-block;
width: 100px;
height: 73.5px;
background: #000000;
clip-path: polygon(0 31%, 63.2% 31%, 63.2% 0, 100% 50%, 63.2% 100%, 63.2% 69%, 0 69%);
}使用上の注意
- モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
- 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。
スポンサーリンク
