<h2>❷</h2>
<div class=patterns id="second"><span hidden class=msg>If there's no pattern, try another browser, the current one doesn't support conic-gradient</span></div>
#second {
	background: conic-gradient(yellow 40deg, blue 40deg, blue 45deg, transparent 45deg), conic-gradient(transparent 135deg, blue 135deg, blue 140deg, transparent 140deg) ;
	background-size: 60px 60px;
	background-color: white;
}

.patterns {
	width: 300px; height: 300px;
	margin: auto; border: 40px white solid;
}

body { background: black; }

h2 { margin: auto; margin-top: 60px; width: 370px; text-align: right; background: yellow; padding-right: 10px;  }

.msg {margin-top: 120px; text-align: center; }

@supports not (background: conic-gradient(yellow 40deg, fuchsia 40deg, fuchsia 45deg, transparent 45deg)) {
	#second .msg {display: block; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.