Phong Duong

🔎Search

How to create pattern with CSS #5

25-08-2020 | #css

<div></div>
:root {
  --red: red;
  --yellow: yellow;
  --transparent: #0000;
}
div {
  min-height: 100vh;
  background: linear-gradient(
      0.25turn,
      var(--transparent) 0 2.85rem,
      var(--yellow) 2.85rem 3.15rem,
      var(--transparent) 3.15rem
    ), conic-gradient(
      at 50% 0,
      var(--red) 105deg,
      var(--transparent) 95deg 255deg,
      var(--red) 255deg
    ), conic-gradient(
      at 50% 5.1rem,
      var(--transparent) 75deg,
      var(--red) 75deg 285deg,
      var(--transparent) 285deg
    ), linear-gradient(
      -15deg,
      var(--transparent) 0 3.5rem,
      var(--red) 3.5rem 3.8rem,
      var(--transparent) 3.8rem 8.3rem,
      var(--red) 8.3rem 8.6rem,
      var(--transparent) 8.6rem
    ), linear-gradient(
      15deg,
      var(--transparent) 0 3.5rem,
      var(--red) 3.5rem 3.8rem,
      var(--transparent) 3.8rem 8.3rem,
      var(--red) 8.3rem 8.6rem,
      var(--transparent) 8.6rem
    ), linear-gradient(
      0.25turn,
      var(--red) 0 0.15rem,
      var(--transparent) 0.15rem 5.85rem,
      var(--red) 5.85rem
    ), var(--yellow);
  background-size: 6rem 8rem;
}

Result

Pattern 5

Share: TwitterFacebookLinkedInHacker News