How to create pattern with CSS #10
01-09-2020 | #css
<div></div>
:root {
--red: red;
--yellow: yellow;
--transparent: #0000;
}
div {
min-height: 100vh;
background: linear-gradient(
var(--transparent) 2rem,
var(--yellow) 2rem 4rem,
var(--transparent) 4rem
), linear-gradient(
0.25turn,
var(--red) 0 2rem,
var(--transparent) 2rem 6rem,
var(--red) 6rem
), linear-gradient(var(--yellow) 6rem, var(--red) 6rem);
background-size: 8rem 8rem;
}
Result