DEV Community

loading...
Cover image for Background pattern - parallelogram shape

Background pattern - parallelogram shape

afif profile image Temani Afif ・1 min read

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))); 
}
Enter fullscreen mode Exit fullscreen mode

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

Parallelogram pattern

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.

Discussion (0)

pic
Editor guide