TGViewer
Defront — про фронтенд-разработку и не только Defront — про фронтенд-разработку и не только @defront · 5.04K subscribers
Post #408 3.55K
Юан Чуан написал статью о том, как сделать треугольник Серпинского с помощью CSS и одного div — "Single div Sierpinski triangle".

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

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

#css #fun

https://yuanchuan.dev/single-div-sierpinski-triangle
yuanchuan.dev Single div Sierpinski triangle Today I found another way to draw the Sierpinski triangle using pure CSS.
More from @defront
  1. Jan 7, 2024Channel name was changed to «Defront — про фронтенд-разработку и не только»
  2. Feb 24, 2022Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет н…
  3. Feb 23, 2022Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после р…
  4. Feb 22, 2022Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для…
  5. Feb 21, 2022Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библио…
  6. Feb 10, 2022Time-travel debugging в Svelte Сэм Ван Тассел рассказал про DeLorian — новый инструмент дл…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →