作る機会があるかどうかは置いといて、CSSだけで市松模様が作る方法を解説します。ちなみに鬼滅の刃は見ていません。

従来の方法

まずは古いテクニックのほうから紹介。

CSS

.bg{
	width: 100vw;
	height: 100vh;
	background-image:
		linear-gradient(45deg,#333 25%,transparent 25%,transparent 75%,#333 75%),
		linear-gradient(45deg,#333 25%,transparent 25%,transparent 75%,#333 75%);
	background-size: 60px 60px;
	background-position: 0 0,30px 30px;
	background-color: #fff;
}

位置をずらした2つのlinear-gradientを使うという手法です。

表示結果

See the Pen checker_1 by Leo_8192 (@Leo_8192) on CodePen.

試しにそれぞれのlinear-gradientを分けてみると、こんな感じになっています（分かりやすいように少し大きくしました）。

See the Pen checker_1 by Leo_8192 (@Leo_8192) on CodePen.

この方法のデメリット

この方法にはコードが少し長い、という以外にも明確なデメリットがあります。

表示結果を見て気付いた人もいるかもしれませんが、実はこのやり方だとユーザーの環境によっては四角の中に斜線が入ります。

linear-gradientの隣接部分に線が入っているのが分かりますね…これはバグというよりブラウザのレンダリングによる影響なので、CSS側で解決するのはかなり難しいと思います。

それでは次に、この現象を回避しつつコードも短くなるという新しい手法を紹介します。

新しい方法

ここで紹介するのはrepeating-conic-gradientを使った手法です。

repeating-conic-gradientは、中心点を基準に周りを色が回っていくようにグラデーションを指定できるというプロパティで、IE以外の全ブラウザが対応しています。

CSS

.bg{
	width: 100vw;
	height: 100vh;
	background-image: repeating-conic-gradient(from 0deg, #333 0deg 90deg, #fff 90deg 180deg);
	background-size: 60px 60px;
}

表示結果

See the Pen checker_2 by Leo_8192 (@Leo_8192) on CodePen.

これならコードが短くて分かりやすいし、どんなにユーザーの環境が変わっても斜線が入ったりすることはありません。完璧！

あと、原理が分かりやすいように別パターンも用意してみました。

See the Pen checker_2 by Leo_8192 (@Leo_8192) on CodePen.

市松模様になる理由がなんとなーく分かり…ますかね？

CSSの解説

この部分を解説すると…

ザックリですがこんな感じです。

最後に

repeating-conic-gradientはあまり使わないプロパティなので、まずは適当に数値を書き換えて挙動を確認するのがオススメです。

試しに角度を少しいじってみると…

See the Pen checker_3 by Leo_8192 (@Leo_8192) on CodePen.

黒の位置を45~135deg、白の位置を135~225degに変えるとこうなります。こういう挙動テストをパパっと簡単に出来るのがCodePenの良いところですね。