Phong Duong

🔎Search

How to create pattern with CSS #19

15-09-2020 | #css

<div></div>
:root {
  --red: red;
  --yellow: yellow;
  --transparent: #0000;
}
div {
  min-height: 100vh;
  background: conic-gradient(
      from 342deg at 5rem 3.49rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ), conic-gradient(
      from 270deg at 3rem 3.49rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ), conic-gradient(
      from 198deg at 2.4rem 5.2rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ), conic-gradient(
      from 126deg at 4rem 6.2rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ), conic-gradient(
      from 54deg at 5.6rem 5.2rem,
      var(--red) 108deg,
      var(--transparent) 108deg
    ), var(--yellow);
  background-size: 8rem 8rem;
}

Result

Pattern 19

Share: TwitterFacebookLinkedInHacker News