CSS hypot() Function
Example
Use hypot() to set the width of elements:
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%
*/
}
Try it Yourself »
Definition and Usage
The CSS hypot() function returns the square
root of the sum of squares of its parameters.
The return value is calculated by sqrt(x1*x1 + x2*x2 +x3*x3 .... xn*xn).
The hypot() function accepts values with
units, but they all must be of the same type.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| hypot() | 120 | 120 | 118 | 15.4 | 106 |
CSS Syntax
hypot(x1, x2, x3, ...)
| Value | Description |
|---|---|
| x1, x2, x3, ... | Required. One or more comma-separated values |
Related Pages
CSS reference: CSS acos() function.
CSS reference: CSS asin() function.
CSS reference: CSS atan2() function.
CSS reference: CSS calc() function.
CSS reference: CSS cos() function.
CSS reference: CSS exp() function.
CSS reference: CSS hypot() function.
CSS reference: CSS log() function.
CSS reference: CSS mod() function.
CSS reference: CSS pow() function.
CSS reference: CSS sin() function.
CSS reference: CSS sqrt() function.
CSS reference: CSS tan() function.
