HTMLとCSSだけで画像配置せずにグラデーション表示する設定方法を整理しました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<div class="grade01"></div>
</body>
</html>
<!-- index.html -->
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lemonchiffon; /* #fffacd */
}
div.grade01 {
Width: 800px;
height: 600px;
background-image: repeating-linear-gradient(
gold 20%,
hotpink 40%);
/*
gold (#ffd700)
hotpink(#ff69b4)
*/
margin: 50px auto;
}
div.grade02 {
Width: 800px;
height: 600px;
background-image: repeating-linear-gradient(
135deg, /* ストライプの角度 */
white, /* 開始色 */
white,20px, /* 開始色+終了地点 */
coral 30px, /* 2番目の色+開始地点 */
mediumorchid 60px); /* 2番目の色+終了地点 */
/*
white(#ffffff)
coral(#ff7f50)
mediumorchid(#ba55d3)
*/
margin: 50px auto;
}
div.grade03 {
Width: 800px;
height: 600px;
background-image: repeating-linear-gradient(
135deg, /* ストライプの角度 */
white, /* 開始色 */
white,10px, /* 開始色+終了地点 */
mediumorchid 10px, /* 2番目の色+開始地点 */
mediumorchid 20px); /* 2番目の色+終了地点 */
margin: 50px auto;
}
div.grade04 {
Width: 800px;
height: 600px;
background-image: repeating-radial-gradient(
circle closest-side,
gold 20%,
hotpink 40%);
margin: 50px auto;
}
div.grade05 {
Width: 800px;
height: 600px;
background-image: repeating-radial-gradient(
circle, /* circle（円）か、ellipse（楕円） */
white, /* 開始色 */
white,20px, /* 開始色+終了地点 */
coral 30px, /* 2番目の色+開始地点 */
mediumorchid 60px); /* 2番目の色+終了地点 */
margin: 50px auto;
}
div.grade06 {
Width: 800px;
height: 600px;
background-image: repeating-radial-gradient(
circle, /* circle（円）か、ellipse（楕円） */
white, /* 開始色 */
white,10px, /* 開始色+終了地点 */
mediumorchid 10px, /* 2番目の色+開始地点 */
mediumorchid 20px); /* 2番目の色+終了地点 */
margin: 50px auto;
}
/* rule.css */
<div class="grade01"></div>
と指定した結果
<div class="grade02"></div>
と指定した結果
<div class="grade03"></div>
と指定した結果
<div class="grade04"></div>
と circle に指定した結果
<div class="grade05"></div>
と circle に指定した結果
<div class="grade06"></div>
と circle に指定した結果
<div class="grade04"></div>
と ellipse に指定した結果
<div class="grade05"></div>
と ellipse に指定した結果
<div class="grade06"></div>
と ellipse に指定した結果
