ギザギザの線を引くためのCSSを生成してくれるジェネレーター「CSS Jagged Border Generator」

ギザギザの線を引くためのCSSを生成してくれるジェネレーター「CSS Jagged Border Generator」

ギザギザの線を引くためのCSSを生成してくれるジェネレーター「CSS Jagged Border Generator」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 月額2980円で顧問を雇いませんか?
  • このエントリーをはてなブックマークに追加

CSS Jagged Border Generatorは、ギザギザの線を実装するためのCSSを生成してくれるジェネレーターです。色とサイズを指定するだけで、簡単にギザギザ線のCSSコードを生成することができます。

スポンサードリンク

CSS Jagged Border Generatorの使い方

CSS Jagged Border Generatorにアクセスして、「Top Color」「Bottom Color」「Size」を指定するだけです。

CSS Jagged Border Generatorの使い方

色やサイズを変更すると、リアルタイムで画面上にCSSが表示されます。

ギザギザ線のCSS

表示されたCSSをギザギザ線を実装したい箇所にコピペして利用します。

background: linear-gradient(-135deg, #ffff80 10px, transparent 0) 0 10px, linear-gradient(135deg, #ffff80 10px, #ffffff 0) 0 10px;
background-color: #ffff80;
background-size: 20px 20px;

背景色のグラデーションを傾けることでギザギザを実現しているわけですね。

あとがき

少し前ならギザギザの線を実現しようと思ったら、画像を使うしかありませんでした。今はCSSだけで、しかも3行追加するだけでギザギザを表現できてしまいますね。

画像を使わずにギザギザの線を引きたいと思ったら、ぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。