web関連

【CSS】「background」で繰り返しの斜めの線を作る方法

2018/08/08

プログラミング

css

よく使うのでメモ

「background」で繰り返しの斜めの線を作る方法

.背景{
    background-image: linear-gradient(-45deg, #fff 30%, #45a537 30%, #45a537 50%, #fff 50%, #fff 80%, #45a537 80%, #45a537);
    background-size: 8px 8px;
    background-attachment: fixed;
}

白の部分を色のついた部分より多くとるといい感じの繰り返しの斜めのストライプができる

僕がこの業界に入った時は、小さな画像を用意して「background」で繰り返し背景で作らされた（2015年）
色とか線の調整がこっちの方がすぐに変更出来て楽。