![見出し画像](https://assets.st-note.com/production/uploads/images/16133593/rectangle_large_type_2_838bac1702258689a0f73bb3055eb20b.png?width=800)
ボーダー/ストライプ背景の作成(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);
【縦横ストライプ イメージ例】
この記事が気に入ったらサポートをしてみませんか?