はじめに

「スラッシュ（斜めストライプ）の背景をCSSで設定できないかな～」と思っていたらできたので、その手順をご紹介します。

正直スラッシュについては画像で作成しても良いと思うのですが、CSSで設定した方がやっぱり後々の編集が楽じゃないかなとも思っています。

仕上がりイメージ

目次

繰り返しのグラデーションを作る

CSSでグラデーションを作る場合はbackground-image: linear-gradient()を使用しますが、これだと繰り返しでの指定ができません。

繰り返しのグラデーションを設定したい場合はbackground-image: repeating-linear-gradient()を使用します。

今回は#338DC9と#cccでグラデーションを作成してみます。

HTML

<div class="sample"></div>

CSS

.sample {
　width: 100%;
　height: 200px; /*width と height は任意の数値を設定*/
　background-image: repeating-linear-gradient( to bottom, #338DC9, #338DC9 10px, #ccc 10px, #ccc 20px);

background-image: repeating-linear-gradient内の値を説明するとこんな感じです。

それでできあがったものが以下になります。

できあがったもの

これで横ストライプ（ボーダー）の背景ができました（グラデーションの方向を調整することで、もちろん縦のボーダーも作成できます）。

今回は「スラッシュを作る」というのが目的なので、次のステップでボーダーを斜めに回転させます。

グラデーションを回転させる

グラデーションの方向をto bottomで下方向に設定していましたが、これを斜め（45度）に変更してみます。

角度を45度に設定するには、値を45degに修正すれば良いです。

CSS

.sample {
　width: 100%;
　height: 200px;
　background-image: repeating-linear-gradient( 45deg, #338DC9, #338DC9 10px, #ccc 10px, #ccc 20px);  /*この行を編集*/

できあがったもの

これでスラッシュ（斜め）のボーダーができました。

現時点では背景色の1つをグレーで作成しているので、次のステップで背景色を透明にして全体の背景に合わせます。

背景色を調整する

背景色を透明にするには、グラデーションの色をtransparentで指定すれば良いです。

2色目の#cccをtransparentに変更してみます。

CSS

.sample {
　width: 100%;
　height: 200px;
　background-image: repeating-linear-gradient( 45deg, #338DC9, #338DC9 10px, transparent 10px, transparent 20px);  /*この行を編集*/

できあがったもの

これで斜め（スラッシュ）のボーダーが作成できました。

グラデーションがギザギザになる時

今回45degでグラデーションを作成したのでグラデーションにジャギー（ギザギザ）が発生しなかったのですが、設定する角度によっては（下のように）ジャギーが発生することがあります（角度を20degで設定してみました）。

CSS

.sample {
　width: 100%;
　height: 200px;
　background-image: repeating-linear-gradient(20deg, #338DC9, #338DC9 10px, transparent 10px, transparent 20px);  /* 20deg に変更しています */

できあがったもの（ジャギー対策前）

ジャギーを解消したい場合、グラデーションの開始位置と終了位置を調整します。

具体的には1色目の終了位置と2色目の開始位置を同じpxにせず、1px程度（場合によっては2px）ずらすとジャギーが解消されます。

上記のCSSの場合、2色目の終了位置と1色目の開始位置が重なる部分もジャギーが発生するので、グラデーションの最後に1色目の値を1pxずらして設定します。

CSS（ジャギー対策後）

.sample {
　width: 100%;
　height: 200px;
　background-image: repeating-linear-gradient(20deg, #338DC9, #338DC9 9px, transparent 10px, transparent 19px, #338DC9 20px);  /*この行を編集 */

できあがったもの（ジャギー対策後）