[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック

画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。

下記は、p要素一つだけです。

実装は、こんな感じです。

HTML

HTMLはpでもdivでも適当に。

<p>塩レモン</p>

CSS

ぎざぎざの線はlinear-gradientでかきます。
ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。

p{
  padding:1em;
  background:
        linear-gradient(-135deg, #4885ff 4px, transparent 0) 0 4px,
        linear-gradient(135deg, #4885ff 4px, #fff 0) 0 4px;
  background-color: #4885ff;
  background-position: left bottom !important;
  background-repeat: repeat-x !important;
  background-size: 8px 8px;
}

面倒な方は下記のジェネレーターを使うと、簡単にできます。

CSS Jagged Border Generator

背景色・前景色・サイズを変更すると、スタイルシートが表示され、ページ下部にすぐに反映されます。