DEV Community

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

Background pattern - triangle shape

afif profile image Temani Afif ・1 min read

A multiple backgrounds trick to create a triangle pattern.

Code structure

html {
  --s:80px;  /* size*/
  --m:8px;   /* space */
  --a:45deg; /* angle*/

  --v1:red    calc((var(--s)*sin(var(--a))/2)),
       #fff 0 calc((var(--s)*sin(var(--a))/2) + var(--m)) ,transparent 0;
  background:
    linear-gradient(transparent calc(100% - var(--m)),#fff 0), /* 4 */
    linear-gradient(calc(-180deg + var(--a)) ,var(--v1)), /* 3 */
    linear-gradient(calc( 180deg - var(--a)) ,var(--v1)), /* 2 */
    green; /* 1 */

  background-size: 
     calc(var(--s) + 2*var(--m)/sin(var(--a))) 
     calc(var(--s)*tan(var(--a))/2 + var(--m)); 
}
Enter fullscreen mode Exit fullscreen mode

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

background triangle 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() and sin() still have no support for now so I am replacing them with SASS functions.

Discussion (0)

pic
Editor guide