CSSでストライプ柄（縞模様）を実現させる方法を見つけたので、それをmixinにしてみました。

1. ストライプ柄のタイプ（斜め、横、円など）
2. 色1
3. 色2
4. 線の太さ

の４つの値を指定するだけで背景をストライプ柄にデザイン出来ます。

 ストライプ柄のサンプル

Chrome、FireFox、IE10、Safariで確認しました。

Opera、IE9以下は残念ながら動かず（背景が白色になります）。あとChromeで確認すると分かりますが、斜めのストライプ柄にした時に歪みます。（アンチエイリアスに弱い？）

 ストライプ柄のスタイルを吐き出すmixin

mixinはSCSS用です。なるべく簡単に使えるよう最小限の構成（引数）にしてます。

@mixin stripeBg($type: 45, $color1: #fff, $color2: #000, $size: 10) {
  @if not(unitless($size)) {
    //サイズに単位が付いてたら削除
    $_nounit_divisor: (floor($size) * 2) % 2 + 1;
    $size: ($size / $_nounit_divisor);
  }
  @if type_of($type) == string {
    //サークル（円）指定の場合
    background: repeating-radial-gradient(
      $type,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
  @else if (type_of($type) == number) {
    //角度指定の場合
    @if not(unitless($type)) {
      //角度に単位が付いてたら削除
      $_nounit_divisor: (floor($type) * 2) % 2 + 1;
      $type: ($type / $_nounit_divisor);
    }
    background: repeating-linear-gradient(
      $type + deg,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
  @else if (type_of($type) == list) {
    //to right,to bottomの場合
    background: repeating-linear-gradient(
      $type,
      $color1,
      $color1 $size + px,
      $color2 $size + px,
      $color2 ($size * 2) + px
    );
  }
}

引数について

それぞれ4つの引数について簡単な説明を。ちなみに角度の「deg」や「px」の単位は付けても付けなくても大丈夫です。

 $type: 数値（もしくは’cricle’や’to right’など）

ストライプ柄のタイプを指定します。斜め、縦・横、円のストライプ柄にするには引数に以下の値を渡します。

• 斜めのストライプなら「45」などの数値（角度）を指定
• 横なら「to right」もしくは「to left」、縦なら「to top」もしくは「to bottom」と指定
• 円なら「circle」と指定

デフォルトは「45」に設定しています。

$color1: 色

1つ目の色を指定します。デフォルトは白（#fff）を設定しています。

$color2: 色

2つ目の色を指定します。デフォルトは黒（#000）を設定しています。

$size: 数値

ストライプの線の幅（ピクセル）を指定します。単位は入れないで、数値のみを指定します。デフォルトは10pxに設定しています。

使い方

デフォルト引数を指定しているので、mixinのソースコードを予め記述して

.stripeBox {
  @include stripeBg;
}

とインクルードするだけで背景がストライプ柄になります。（白黒ですが）

色を指定する場合は第二引数、第三引数で色を入力して下さい。

.stripeBox {
  @include stripeBg(0, #E67E22, #D35400, 5);
}

縦・横や円は第一引数にこんな感じで指定します。

//横ストライプ
.horizontalStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(to right, #E67E22, #D35400, 5);
}

//縦ストライプ
.verticalStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(to bottom, #E67E22, #D35400, 5);
}

//円ストライプ
.circleStripe {
  height: 100px;
  margin: 3%;
  @include stripeBg(circle, #2ECC71, #27AE60, 20);
}

参考になったページ・本

このストライプ柄のmixin作成で参考になったページ・本のご紹介。

Stripes in CSS | CSS-Tricks

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd ...

Sass(Scss): 数値から単位を取り除く@function (演算でゴニョゴニョとやった) – jsdo.it – Share JavaScript, HTML5 and CSS

Sass(Scss): 数値から単位を取り除く@function (演算でゴニョゴニョとやった) by a_t @ jsdo.it - share JavaScript, HTML5 and CSS - jsdo.itはブ...

斜めストライプはChromeだと歪んでしまうので、もし斜めストライプを使う場合は薄めにしてフワッと見せるのが良いかもしれません。

photo credit: marfis75 via photopincc