Phong Duong

🔎Search

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

Pattern 10

Share: TwitterFacebookLinkedInHacker News