repeating-linear-gradient()関数とrepeating-radial-gradient()関数は、それぞれlinear-gradient()関数、radial-gradient()関数と同じ引数を取り、同じような動作をしますが、指定されたカラーストップを自動的に繰り返す仕様になっています。詳細はMDNにてご確認ください。ブラウザ対応状況などもこちらで確認できます。

• repeating-linear-gradient – CSS | MDN
• repeating-radial-gradient – CSS | MDN

repeating-linear-gradient()関数を使って「ストライプ」を作る

サンプル

repeating-linear-gradient()関数で作ったストライプです。

ソースコード

ソースコードは以下のようになります。background-imageプロパティにrepeating-linear-gradient()関数を指定します。これだけです！

<!-- CSS部分 -->
<style>
#div2348-1 {
    width: 200px;
    height: 200px;
    background-image:
      repeating-linear-gradient (-45deg, white, white 5px, green 5px, green 10px);
}
</style>

<!-- HTML部分 -->
<div id="div2348-1"></div>

解説

ここでのrepeating-linear-gradient()関数の構文は以下のようになっています。

第1引数にストライプの角度を指定し、その後はストライプを作るボーダーの色とその始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの開始位置からの距離を指定します。色は何色でも指定できます。色の指定が終わった所で、再び最初に指定した色からボーダーが繰り返し表示されます。

repeating-radial-gradient()関数を使って「ストライプ」を作る

サンプル

repeating-radial-gradient()関数で作ったストライプです。

ソースコード

ソースコードは以下のようになります。同じくbackground-imageプロパティにrepeating-radial-gradient()関数を指定します。こちらもこれだけです！

<!-- CSS部分 -->
<style>
#div2348-2 {
    width: 200px;
    height: 200px;
    background-image:
      repeating-radial-gradient (white, white 5px, green 5px, green 10px);
}
</style>

<!-- HTML部分 -->
<div id="div2348-2"></div>

解説

ここでのrepeating-radial-gradient()関数の構文は以下のようになっています。

こちらは第1引数からストライプを作るボーダーの色とその始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの始まりからの距離を指定します。色は何色でも指定できます。色の指定が終わった所で、再び最初に指定した色からボーダーが繰り返し表示されます。ちなみに第1引数にグラデーションの開始位置をx座標、y座標で指定することができます（省略も可能。省略した場合は中央から開始されます）。

以前の投稿『8ステップで完成！CSS3で「斜めのストライプ」を作る方法』で紹介したストライプを作る方法では、background-sizeプロパティを併せて使う必要があり、若干わかりにくい部分がありました。繰り返し機能を持つ「repeating-linear-gradient()関数」「repeating-radial-gradient()関数」を使うことで、background-sizeプロパティを使わずに済みます。楽にストライプを実装することができます。ただ細かいストライプを指定したときのブラウザの描画があまり滑らかでないのが気になります。使いどころをよく考えて、適材適所で使っていければってところでしょうか。