CSS function hypot


Опис

hypot() - це CSS-функція, яка використовується для обчислення гіпотенузи за допомогою катетів прямокутного трикутника. Гіпотенуза - це найбільша сторона трикутника, яка з'єднує два катети. Використання функції hypot() дозволяє виконувати розрахунки гіпотенузи на основі заданих значень катетів і використовувати результат у стилях CSS.

Функція hypot() приймає два аргументи - довжину першого катета та довжину другого катета. Ці аргументи повинні бути вказані з одиницями виміру, такими як пікселі (px), відсотки (%), рем (rem) тощо. Наприклад, hypot(3px, 4px) обчислить гіпотенузу прямокутного трикутника з катетами довжиною 3 пікселі та 4 пікселі.

Приклад використання функції hypot():

.triangle {
  width: hypot(100px, 50px);
  height: hypot(100px, 50px);
  background-color: red;
}

У цьому прикладі, ми використовуємо функцію hypot() для обчислення гіпотенузи прямокутного трикутника з катетами довжиною 100px та 50px і встановлюємо результат як ширину та висоту елемента .triangle. Таким чином, ми створюємо квадрат з червоним фоном, який має діагональ з обчисленою гіпотенузою.

автор: Bond

Порада

Використовуйте функцію hypot() для обчислення гіпотенузи в різних ситуаціях, де вам потрібно обчислити відстань або векторні значення.

автор: Bond
Нотатка

Переконайтеся, що передаєте числові значення довжин як аргументи функції hypot(). Якщо передані значення не можуть бути перетворені в числа, функція поверне помилку.

автор: Bond

Синтаксис

hypot(length1, length2, ...);

Функція hypot може отримувати єдине значення:

<value>

Числа, пікселі, відсотки, значення в em та rem.

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Mozilla Firefox Apple Safari
112 15.4
Підтримка: мобільні переглядачі
Переглядач Mobile Mozilla Firefox Mobile Apple Safari
112 15.4

Приклади

+ запропонувати свій приклад у пісочниці

Елемент з обчисленою шириною за допомогою функції hypot().

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід