<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 80px;
background-color: pink;
}
div.a {
width: hypot(80px);
}
div.b {
width: hypot(40px, 80px);
}
div.c {
width: hypot(40px, 80px, 100px);
}
div.d {
width: hypot(40px, 80px, 100px, 120px);
}
div.e {
width: hypot(10%, 20%, 40%);
}
</style>
</head>
<body>
<h1>The hypot() Function</h1>
<h2>width: hypot(80px):</h2>
<div class="a">Hello World!</div>
<br>
<h2>width: hypot(40px, 80px):</h2>
<div class="b">Hello World!</div>
<br>
<h2>width: hypot(40px, 80px, 100px):</h2>
<div class="c">Hello World!</div>
<h2>width: hypot(40px, 80px, 100px, 120px):</h2>
<div class="d">Hello World!</div>