どうも！LSSです！！
以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。
conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で、background-sizeやbackground-positionと組み合わせるとなかなか自由度が高い模様を生み出せますが、その点では linear-gradient は「直線的」であるがゆえに作れる模様が限られていると感じています。
が、今回ふと、「 linear-gradient でも、斜め市松模様なら描けるのでは？」と思いつき、試してみました。
斜め市松模様
コード
<style>
.chkptn{
height:300px;
padding:10px;
background-image:
linear-gradient(to top right,#dddddd 25%,#dddddd00 26% 74%,#dddddd 75%)
,linear-gradient(to top left,#dddddd 25%,#dddddd00 26% 74%,#dddddd 75%)
;
background-size:50px 50px;
}
</style>
<div class="chkptn">斜め市松模様です。</div>
２つのlinear-gradientを使って、斜め市松模様を描く事ができました！
ちょっと面白いところは、「to top left」や「to top right」を指定している事により、
background-size:50px 50px;
とサイズ指定しているところを、例えば
background-size:50px 20px;
のように縦横の比率を変えて指定しても、
↑のように、形が正方形から菱形になるだけで、交差した状態は保たれているんですね^^
（25%、75%という指定を使っているところがポイント）
斜め市松模様 応用
↑色変化や配置をずらす事で、conic-gradientとは違った応用もできます。
コード
<style>
.chkptn2{
height:300px;
padding:10px;
background-image:
linear-gradient(to top right,#ffffff 0%,#ffcccc 25%,#ffcccc00 26% 74%,#ffcccc 75%,#ffffff 100%)
,linear-gradient(to top left,#ffffff 0%,#ffcccc 25%,#ffcccc00 26% 74%,#ffcccc 75%,#ffffff 100%)
,linear-gradient(to top right,#ffffff 0%,#ccccff 25%,#ccccff00 26% 74%,#ccccff 75%,#ffffff 100%)
,linear-gradient(to top left,#ffffff 0%,#ccccff 25%,#ccccff00 26% 74%,#ccccff 75%,#ffffff 100%)
;
background-size:60px 40px;
background-position:0 0,0 0,30px 20px,30px 20px;
}
</style>
<div class="chkptn2">なんかカラフルな感じにも！</div>
今度は４つの linear-gradient を使い、サイズを「60px 40px」と指定して、４つ中２つの配置を「30px 20px」とサイズの半分だけずらしています。
あとがき
linear、radial、conic と３つあるgradient。
グラデーションを描いた際にはそれぞれ異なる形でグラデーションが広がりますが、一番単純かと思われた linear-gradient にもまだまだ工夫の余地がありましたね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
