Conic-Gradient()を使用して時計回りの綺麗なグラデーションから市松模様を描く方法
Conic-Gradient()の基本
円回転方向にグラデーションをかけます。
gra4
height: 100px;
width: 100px;
background: conic-gradient(red, yellow, green);
赤、黄、緑の右回り順でグラデーションをかけました。
綺麗ですね。
おっと、Top位置(0時の位置)の境目が気になりますね。
隣り合う色を揃えてみましょう。
gra5
background: conic-gradient(red, orange, yellow, green, red);
はい。綺麗ですね。最初と最後の色を合わせました。境目がなくなりましたね。
グラデーションの変化分の両端を指定すれば。くっきりな境目になりますね。
gra6
background: conic-gradient(
red 45deg,
orange 45deg 90deg,
yellow 90deg 180deg,
blue 180deg 270deg,
purple 270deg
);
このように回転する方向にグラデーションをかけることができます。
HSL色空間によるグラデーションの指定も便利かもしれません。
gra8
background: conic-gradient(
hsl(360, 100%, 50%),
hsl(315, 100%, 50%),
hsl(270, 100%, 50%),
hsl(225, 100%, 50%),
hsl(180, 100%, 50%),
hsl(135, 100%, 50%),
hsl(90, 100%, 50%),
hsl(45, 100%, 50%),
hsl(0, 100%, 50%)
);
HLS色空間は、色相、彩度、輝度の概念で構成される色の表現方法です。色味を0から360度で表します。
中心位置と開始角度の調整
中心点の移動、開始角度を調整できます。
gra7
background: conic-gradient(from 45deg at 60% 30%, white, blue, white);
応用編
市松模様を描きます。
まずは1マスの模様を描きましょう。
gra9
gra93
background: conic-gradient(
#25a37d 90deg,
#261818 90deg 180deg,
#25a37d 180deg 270deg,
#261818 270deg
);
これをサイズ25%くらいで繰り返してみましょう。
gra91
background: conic-gradient(
#25a37d 90deg,
#261818 90deg 180deg,
#25a37d 180deg 270deg,
#261818 270deg) top left / 25% 25%;
background: conic-gradient(
#25a37d 0.25turn,
#261818 0.25turn 0.5turn,
#25a37d 0.5turn 0.75turn,
#261818 0.75turn) top left / 25% 25% repeat;
出来上がりです。とってもいい感じの市松模様ですね。