HTMLとCSSでストライプの背景操作をしてみました。以前アップしたグラデーションの応用です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title>ストライプの背景</title>
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
</body>
</html>
<!-- index.html -->
/* rule.css */
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: repeating-linear-gradient(
45deg,
paleturquoise 0,
paleturquoise 25px,
lightcyan 25px,
lightcyan 50px
);
}
/* rule.css */
上が実行した結果です。
-------------------rule.cssのbackgroundを以下に変更
background: repeating-linear-gradient(
45deg,
paleturquoise 0,
paleturquoise 25px,
lightcyan 25px,
lightcyan 50px,
aquamarine 50px,
aquamarine 75px
);
上が実行した結果です。
-------------------
rule.cssのbackgroundを以下に変更
background: repeating-linear-gradient(
45deg,
paleturquoise 0,
paleturquoise 10px,
lightcyan 10px,
lightcyan 20px,
aquamarine 20px,
aquamarine 30px,
powderblue 30px,
powderblue 40px,
aliceblue 40px,
aliceblue 50px,
powderblue 50px,
powderblue 60px
);
}
上が実行した結果です。
