CSS3：CSSのみでギザギザ線を実装する。

今回はlinear-gradientのtransparentを使って、ギザギザ線の作り方を。
簡単に実装できるのでお試しください。

KEY SENTENCE

[1] ギザギザ線の実例

[2] 実装方法

[1] ギザギザ線の実例

こういうのを作ります。

GIZAGIZA LINE

[2] 実装方法

HTML,CSSはそれぞれ以下のように記述して下さい。

HTML

<div class="gizagiza">GIZAGIZA LINE</div>

CSS

.gizagiza {

  padding:1em;/*記載しなくてもおk*/

  background:

  linear-gradient(-135deg, #53727d 4px, transparent 0) 0 4px,

  linear-gradient(135deg, #53727d 4px, #fff 0) 0 4px;/*#fffはギザギザ線下部の色です*/

  background-position: left bottom !important;/**/

  background-repeat: repeat-x !important;

  background-size: 8px 8px;

  background-color: #53727d;/*記載しなくてもおk*/

  color:#ffc800;/*記載しなくてもおk*/

  text-shadow:0 1px 3px rgba(0,0,0,.5);/*記載しなくてもおk*/

  }

CSSはdiv要素でもp要素でも構いませんので、ご自由に。

ギザギザ線の大きさを変えたい場合は、cssのうち、backgroundの４カ所の4pxの部分とbackground-sizeの8px 8px部分をそれぞれ変更してあげれば自由に変更可能です。
backgroundで指定した大きさの２倍の大きさをbackground-sizeにあててあげてください。

それすらもめんどくさい方はこちらのジェネレータをお使いください。

CSS Jagged Border Generator

背景色・ギザ下部色・ギザギザサイズを指定するだけでCSSを書き出してくれます。

Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)