Phong Duong

🔎Search

How to create pattern with CSS #7

27-08-2020 | #css

<div></div>
:root {
  --red: red;
  --yellow: yellow;
  --transparent: #0000;
}
div {
  min-height: 100vh;
  background: conic-gradient(
      from 180deg at 3.5rem 5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ), conic-gradient(
      from 90deg at 4.5rem 5rem,
      var(--yellow) 90deg,
      var(--transparent) 90deg
    ), linear-gradient(
      0.25turn,
      var(--red) 0 0.5rem,
      var(--transparent) 0.5rem 7.5rem,
      var(--red) 7.5rem
    ), linear-gradient(
      var(--red) 0 1rem,
      var(--yellow) 1rem 4rem,
      var(--red) 4rem 5rem,
      var(--transparent) 5rem
    ), linear-gradient(0.25turn, var(--transparent) 0 3.5rem, var(--red) 3.5rem 4.5rem, var(
          --transparent
        ) 4.5rem);
  background-size: 8rem 8rem;
}

Result

Pattern 7

Share: TwitterFacebookLinkedInHacker News