CSS hypot() 関数

定義と使用方法

CSSの hypot() 関数はその引数の平方和の平方根を返します。

返り値は、公式 sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn) で計算されます。

hypot() 関数は単位を持つ数値を受け取りますが、すべての値の単位は同じでなければなりません。

例

使用 hypot() 要素の幅を設定する：

div.a {
  width: hypot(80px); /* 80px */
}
div.b {
  width: hypot(40px, 80px); /* 89,44px */
}
div.c {
  width: hypot(40px, 80px, 100px); /* 134,16 */
}
div.d {
  width: hypot(40px, 80px, 100px, 120px); /* 180 */
}
div.e {
  width: hypot(10%, 20%, 40%); /* 45,82% */
}

実際に試してみる

CSS 语法

hypot(x1, x2, x3, ...)
値 説明
x1, x2, x3, ... 必須。一つまたは複数の値を、カンマで区切ります。

技術的詳細

バージョン： CSS4

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

関連ページ

参照：CSS acos() 関数

参照：CSS asin() 関数

参照：CSS atan2() 関数

参照：CSS calc() 関数

参照：CSS cos() 関数

参照：CSS exp() 関数

参照：CSS hypot() 関数

参照：CSS log() 関数

参照：CSS mod() 関数

参照：CSS pow() 関数

参照：CSS sin() 関数

参照：CSS sqrt() 関数

参照：CSS tan() 関数