ボーダー/ストライプ背景の作成(CSS)
「繰り返したい色と、その幅」と「角度」を指定するイメージ。
【基本形(文法)】
background:repeating-linear-gradient(角度, カラー1 開始位置, カラー1 終了位置, カラー2 開始位置, カラー2 終了位置,…);
【横ストライプ例】
角度は「0」指定なので省略。
background:repeating-linear-gradient(#e79901 0, #e79901 10px, #e2e7eb 10px, #e2e7eb 20px);
【縦ストライプ例】
角度は「90」指定。
background:repeating-linear-gradient(90deg, #e79901 0, #e79901 10px, #e2e7eb 10px, #e2e7eb 20px);
【ななめストライプ例】
角度は「45」指定。
background:repeating-linear-gradient(45deg, #e79901 0, #e79901 10px, #e2e7eb 10px, #e2e7eb 20px);
【縦横ストライプ イメージ例】