Треугольник Серпинского c помощью CSS и div

Юан Чуан написал статью о том, как сделать треугольник Серпинского с помощью CSS и одного div — "Single div Sierpinski triangle".

Треугольник Серпинского — это фрактальная структура, состоящая из большого количества треугольников, образующих паттерн. Идея его отрисовки с помощью CSS заключается в наложении друг на друга нескольких слоёв повторяющихся и уменьшающихся прямоугольных треугольников, создающихся с помощью линейного градиента. Первая половина треугольников на всех слоях закрашивается цветом, а вторая остаётся полностью прозрачной. После отрисовки всех слоёв с треугольниками применяется transform: skew() для трансформации прямоугольного треугольника в равнобедренный.

Красивое решение задачи. Рекомендую посмотреть.

https://yuanchuan.dev/single-div-sierpinski-triangle

← На главную