Background pattern - parallelogram shape

A multiple backgrounds trick to create a parallelogram pattern.

Code structure

html {
  --s:50px;  /* shape size*/
  --m:10px;  /* space */
  --a:45deg; /* angle */

  --v1:red   var(--a), transparent calc(var(--a) + 0.3deg);
  --v2:green var(--a), transparent calc(var(--a) + 0.3deg);
  background:
    /* 4 */
    conic-gradient(from  calc(-90deg - var(--a)) at calc(100% - var(--m)) 0      ,var(--v1)),
    /* 3 */
    conic-gradient(from  calc(90deg  - var(--a)) at var(--m) calc(50% - var(--m)),var(--v1)),
    /* 2 */ 
    conic-gradient(from  90deg at var(--m) 50%                                ,var(--v2)),
    /* 1 */ 
    conic-gradient(from -90deg at calc(100% - var(--m)) calc(100% - var(--m)) ,var(--v2));

  background-size: calc(var(--s) + var(--m)) calc(2*(var(--s)*tan(var(--a)) + var(--m))); 
}

An illustration to understand how the pattern is created by combining the different background layers:

That's it!

All you have to do is to adjust the different variables to control the shape. Note that Trigonometric Functions such as tan() still have no support for now so I am replacing them with SASS functions.