20

Sierpinski Triangle in CSS

 4 years ago
source link: https://yuanchuan.dev/single-div-sierpinski-triangle
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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: 200px; height: 200px;
  --lg: linear-gradient(135deg, #000 50%, transparent 0);
  background: var(--lg) 0 0 / 100% 100%;
  background-color: #f5f5f5;
}

Step 2

Add another one with background-size of 50% 50% . 

div {
  width: 200px; height: 200px;
  --lg: linear-gradient(135deg, #000 50%, transparent 0);
  background:
    var(--lg) 0 0 / 100% 100%,
    var(--lg) 0 0 / 50% 50%;
  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: 200px; height: 200px;
  --lg: linear-gradient(135deg, #000 50%, transparent 0);
  background:
    var(--lg) 0 0 / 100% 100%,
    var(--lg) 0 0 / 50% 50%,
    var(--lg) 0 0 / 25% 25%,
    var(--lg) 0 0 / 12.5% 12.5%,
    var(--lg) 0 0 / 6.25% 6.25%;
  background-color: #f5f5f5;
}

Step 4

Swap background and gradients (triangles) colors.

div {
  width: 200px; height: 200px;
  --lg: linear-gradient(135deg, #f5f5f5 50%, transparent 0);
  background: /* ... */;
  background-color: #000;
}

Final step

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

div {
  width: 200px; height: 200px;
  --lg: linear-gradient(135deg, #fff 50%, transparent 0);
  background:
    var(--lg) 0 0 / 100% 100%,
    var(--lg) 0 0 / 50% 50%,
    var(--lg) 0 0 / 25% 25%,
    var(--lg) 0 0 / 12.5% 12.5%,
    var(--lg) 0 0 / 6.25% 6.25%;
  background-color: #000;
  mask: linear-gradient(-45deg, #000 50%, transparent 0);
  transform: skew(27deg) translateX(-25%);
}

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 .

MFNJfmu.jpg!web

That would be another journey.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK