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. Таким чином, ми створюємо квадрат з червоним фоном, який має діагональ з обчисленою гіпотенузою.
| Нотатка: | Переконайтеся, що передаєте числові значення довжин як аргументи функції |
| Порада: | Використовуйте функцію |
Синтаксис
hypot(length1, length2, ...);<value>Числа, пікселі, відсотки, значення в
emтаrem.
Переглядачі
| Переглядач | ||
|---|---|---|
112 |
15.4 |
| Переглядач | ||
|---|---|---|
112 |
15.4 |
Мобільних переглядачів ще не додано.
Приклади
Елемент з обчисленою шириною за допомогою функції hypot().