斜めストライプを背景色に設定する方法

斜めストライプを背景色に設定する方法です。斜めの大きな2回繰り返すグラデーションを作成して、背景サイズを小さな値にすることで、斜めストライプを背景色に設定できます。

斜めストライプを背景色に設定するCSS

斜めストライプを背景色に設定するCSSです。ストライプ幅は、1pxです。

斜めストライプ背景色
background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);
background-size:4px 4px;

ストライプ色を変えるには?

#fffは間隔の白色です。その後ろの二つの「#DBEDFF」を変更しましょう。

斜めストライプ背景色
background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,red 25%, red 50%);
background-size:4px 4px;

ストライプ幅を変えるには

background-sizeを使うことで調整できます。

斜めストライプ背景色 - ストライプ2px
background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);
background-size:8px 8px;
斜めストライプ背景色 - ストライプ4px
background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);
background-size:16px 16px;

背景サイズを指定しないとどうなるの?

こうなります。

背景サイズなし
background: repeating-linear-gradient(-45deg,#fff 0%,#fff 25%,#DBEDFF 25%, #DBEDFF 50%);

4pxを指定すると、ストライプ幅は1pxになるのは、このような背景を4pxの正方形に入れようとしているからですね。

Perl開発者のためのWebデザイン入門の紹介