CSS3のみで斜線ボーダーの背景装飾を実装してみる

10px程度の斜線の画像を用意し、それを背景に繰り返し表示してボーダー装飾しているサイトをよく見かけます。
今回、それを画像を用いずにCSS3だけで実現してみます。

まず、線形グラデーションを使ってラインを引きます。

25%、50%、75%のポイントで黒、白の両方を指定することで、グラデーションの境界を切り替えます。
クロスブラウザ対策で「-webkit-gradient」と「-moz-linear-gradient」を指定すると、CSSは以下のようになります。

background: -webkit-gradient(linear, left top, right top, from(black), color-stop(0.25, black), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, black), color-stop(0.75, black), color-stop(0.75, white), to(white));
background: -moz-linear-gradient(black 25%, white 25%, white 50%, black 50%, black 75%, white 75%, white);
background: linear-gradient(black 25%, white 25%, white 50%, black 50%, black 75%, white 75%, white);

これに「background-size」を指定すると、そのサイズ内で繰り返しになります。
例えば10pxで指定すると以下のようになります。

さらにデフォルトでは色を4回切り替えているので、4pxを指定してみます。

線形に45度の角度をつけます。

色を抑えてみます。黒の部分をグレーに置換。

最終的なCSSは以下になります。

background: -webkit-gradient(linear, left top, right bottom, from(#ddd), color-stop(0.25, #ddd), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, #ddd), color-stop(0.75, #ddd), color-stop(0.75, white), to(white));
background: -moz-linear-gradient(-45deg, #ddd 25%, white 25%, white 50%, #ddd 50%, #ddd 75%, white 75%, white);
background: linear-gradient(-45deg, #ddd 25%, white 25%, white 50%, #ddd 50%, #ddd 75%, white 75%, white);
background-size: 4px 4px;

実際にこのブログの背景も装飾してみました。
ちなみに、当然ながらIEは対応していません。

この手法でレイヤーを重ねたり、透過をうまく活用すると、チェック柄の装飾も画像を使わずにCSS3のみで実装可能です。
すごく便利。うまく活用したいですね。