【CSS】linear-gradientで描く「斜め市松模様」

　どうも！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 にもまだまだ工夫の余地がありましたね。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^