見出し画像

ボーダー/ストライプ背景の作成(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);


【縦横ストライプ イメージ例】

画像1


【出典】
https://www.wan55.co.jp/column/detail/id=659

いいなと思ったら応援しよう!