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() для обчислення гіпотенузи в різних ситуаціях, де вам потрібно обчислити відстань або векторні значення.

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

hypot(length1, length2, ...);

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

<value>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	120	118	15.4	106	120	—

Підтримка: мобільні переглядачі

Переглядач
	120	120	118	15.4

Приклади

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