in ,

Single div Sierpinski triangle, Hacker News

     

    

    Today I found another way to draw the Sierpinski triangle using pure CSS.          There are no recursive divs corresponding to the fractal structure,     so it’s simpler and performs better.   

  

    The method is to use multiple background gradients to draw triangles that are controlled by background-size .   

  

Here is how

  

    Actually, the whole code is pretty simple, but I’ll try to explain it step by step.   

  

Step 1

  

    Let’s add a linear-gradient tilted with a degree to make it a triangle.   

  

         

   
 div   {
   
 width  :  
 (px)  
;  (height 
:   (px 

) ;    - lg :

 (linear-gradient)     Brave Browser deg  
 ,  
 #  

(%

) ,  
 transparent  
 
 
); 
   
 background  :  
 var     
 - lg  )  (0) 
 (0    /  (%  
 (%) ; 
    background-color  :  
 # f5f5f5  
  
} 
 

  

Step 2

  

    Add another one with background-size of (%) % .   

  

         

   
 div   {
   
 width  :  
 (px)  
;  (height 
:   (px 

) ;    - lg :

 (linear-gradient)     Brave Browser deg  
 ,  
 #  

(%

) ,  
 transparent  
 
 
); 
   
 background  : 
     
 var    ( 
 - lg  
  
 (0) (0)  /   (%) %  
      
 var    ( 
 - lg  
  
 (0) (0)  /   (%) %  
;     background-color  :  
 # f5f5f5  
  
} 
 

  

    The previous background has a higher z-index value than the latter one when there are multiple backgrounds.     And that's what we wanted: using smaller triangles to fill the holes.   

     

Step 3

  

    Then add enough levels of gradients. The background-size     is always half the size of the previous one.   

  

         

   
 div   {
   
 width  :  
 (px)  
;  (height 
:   (px 

) ;    - lg :

 (linear-gradient)     Brave Browser deg  
 ,  
 #  

(%

) ,  
 transparent  
 
 
); 
   
 background  : 
     
 var    ( 
 - lg  
  
 (0) (0)  /   (%) %  
      
 var    ( 
 - lg  
  
 (0) (0)  /   (%) % 

    

 var    ( 
 - lg  
  
 (0) (0)  /   (%)  
  (% 
) , 
     
 var    ( 
 - lg  
  
 (0) (0)  /   5% 

  5%  ,      
 var    ( 
 - lg  
  
 (0) (0)  /   6.  (%)  
 6.  (%) ;     background-color  :  
 # f5f5f5  
  
} 
 

  

Step 4

  

Swap background and gradients (triangles) colors.

  

         

   
 div   {
   
 width  :  
 (px)  
;  (height 
:   (px 

) ;    - lg :

 (linear-gradient)     Brave Browser deg  
 ,   # f5f5f5 

(%)

,
 (transparent) () 
  ); 
   
 background  : 

/

;      background-color  :  
  
  
} 
 

  

Final step

  

    Remove the top left part with mask and adjust angle with transform .     See also the live

example on CodePen.      

         

   
 div   {
   
 width  :  
 (px)  
;  (height 
:   (px 

) ;    - lg :

 (linear-gradient)     Brave Browser deg  
 ,   # fff   (%)  ,  
 (transparent) () 
  ); 
   
 background  : 
     
 var    ( 
 - lg  
  
 (0) (0)  /   (%) %  
      
 var    ( 
 - lg  
  
 (0) (0)  /   (%) % 

    

 var    ( 
 - lg  
  
 (0) (0)  /   (%)  
  (% 
) , 
     
 var    ( 
 - lg  
  
 (0) (0)  /   5% 

  5%  ,      
 var    ( 
 - lg  
  
 (0) (0)  /   6.  (%)  
 6.  (%) ;     background-color  :  
  
    
 mask 

:

 linear-gradient  
 

- deg ,

 

(%) ,

 (transparent) 
 
  
); 
   
 transform  :  
 skew     
  deg  )  
 translateX 

 (
  - %   ); 
 
} 
 

  

How deep it can go

  

    Chrome can render as many triangles as possible but     Safari and Firefox don't work well as the triangle is getting smaller.   

     

Hmmm

  

    CSS is kind of different from any other tools.     Sometimes you really need to think in CSS in order to develop an elegant solution.   

  

    The technique described in this article can be used to generate many interesting patterns too,     together with radial-gradient or conic-gradient .   

  

       

That would be another journey.

Brave Browser Read More

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

Strong winds, dust storm, rough seas in the UAE

Telidon, Hacker News