Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

sin(), cos() и tan() в CSS: круговые диаграммы без SVG

Декоративные дуги и polar-раскладка на чистом CSS.

Изображение статьи: sin(), cos() и tan() в CSS: круговые диаграммы без SVG

Функции sin(), cos() в calc() позволяют вычислять координаты точек на окружности — например, расставить иконки вокруг hero-иллюстрации.

Углы передаются в rad через calc(var(--i) * 1turn / 8).

- [Trigonometric functions — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_values_and_units/Trigonometric_functions) — sin, cos, tan.

- [CSS trigonometric functions — web.dev](https://web.dev/articles/css-trig-functions) — Примеры раскладки.

---

## Доступность

Декор не должен нести единственный смысл — дублируйте данные текстом или в таблице.

#CSS#математика#UI

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.