Функція hypot() в CSS — гіпотенуза й довжина вектора

HTML

<div id="description">
  <h2>Приклад</h2>
  <p>Елемент з обчисленою шириною за допомогою функції hypot()</p>
</div>

<div id="result">
  <div class="box"></div>
</div>

CSS

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: hypot(3em, 4em);
  height: 100px;
  background: blue;
}

HTML

<p class="head">Гіпотенуза без жодного числа в коді: довжина — hypot(--a, --b),
    кут — atan2(--b, --a). Катети намальовано рамкою:</p>
<div class="row">
    <div class="tri tr1"><span class="hyp"></span></div>
    <div class="tri tr2"><span class="hyp"></span></div>
    <div class="tri tr3"><span class="hyp"></span></div>
</div>
<p class="cap">катети 120 і 90 → 150px &nbsp;·&nbsp; 80 і 60 → 100px &nbsp;·&nbsp; 140 і 140 → 197.99px</p>

<p class="head">З одним аргументом це просто модуль — знак не має значення:</p>
<div class="col">
    <div class="line"><span class="tag">hypot(200px)</span><span class="bar h1"></span><b>200px</b></div>
    <div class="line"><span class="tag">hypot(-200px)</span><span class="bar h2"></span><b>200px</b></div>
    <div class="line"><span class="tag">hypot(-120px, 160px)</span><span class="bar h3"></span><b>200px</b></div>
    <div class="line"><span class="tag">hypot(40px, 80px, 80px)</span><span class="bar h4"></span><b>120px — діагональ у просторі</b></div>
</div>

<p class="head">Тип зберігається. Ліворуч — кут hypot(30deg, 40deg) = 50deg,
    праворуч — відсоток: батько 300px, тож hypot(30%, 40%) = 150px:</p>
<div class="row">
    <div class="dial"><i></i></div>
    <div class="frame"><span class="bar h5"></span><b class="fcap">hypot(30%, 40%) = 150px із 300px</b></div>
</div>

<p class="head">⚠️ Мішанка типів і порожній виклик валять оголошення —
    смуги лишились по 300px:</p>
<div class="col">
    <div class="line"><span class="tag">width: hypot(3px, 4)</span><span class="bar bad h6"></span><b>відкинуто</b></div>
    <div class="line"><span class="tag">width: hypot()</span><span class="bar bad h7"></span><b>відкинуто</b></div>
    <div class="line"><span class="tag">width: calc(hypot(3, 4) * 40px)</span><span class="bar good h8"></span><b>200px</b></div>
</div>

CSS

.head {
    margin: 20px 0 8px;
    max-width: 620px;
    color: #5a6472;
    font-size: .9em;
}

.cap {
    margin: 6px 0 0;
    color: #5a6472;
    font: 12px/1.4 ui-monospace, monospace;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-end;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tag {
    width: 230px;
    color: #333;
    font: 12px/1 ui-monospace, monospace;
    text-align: right;
}

.line b {
    color: #5a6472;
    font: 700 12px/1 ui-monospace, monospace;
}

.tri {
    position: relative;
    width: calc(var(--a) * 1px);
    height: calc(var(--b) * 1px);
    border-left: 3px solid #b9c6d8;
    border-bottom: 3px solid #b9c6d8;
}

.hyp {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #2f6fd0;
    transform-origin: left bottom;
    width: hypot(calc(var(--a) * 1px), calc(var(--b) * 1px));
    rotate: calc(atan2(var(--b), var(--a)) * -1);
}

.tr1 { --a: 120; --b: 90; }
.tr2 { --a: 80; --b: 60; }
.tr3 { --a: 140; --b: 140; }

.bar {
    display: block;
    height: 26px;
    background: #2f6fd0;
}

.h1 { width: hypot(200px); }
.h2 { width: hypot(-200px); }
.h3 { width: hypot(-120px, 160px); }
.h4 { width: hypot(40px, 80px, 80px); background: #3a9a4f; }

.dial {
    position: relative;
    width: 120px;
    height: 120px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
    border-radius: 50%;
}

.dial i {
    position: absolute;
    left: 57px;
    top: 16px;
    width: 6px;
    height: 44px;
    background: #3a9a4f;
    transform-origin: bottom center;
    rotate: hypot(30deg, 40deg);
}

.frame {
    width: 300px;
    padding: 6px 0;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

.h5 { width: hypot(30%, 40%); background: #e08a1e; }

.fcap {
    display: block;
    padding: 4px 0 0 6px;
    color: #5a6472;
    font: 700 12px/1 ui-monospace, monospace;
}

.bad {
    width: 300px;
    background: #d64545;
}

.good {
    width: 300px;
    background: #3a9a4f;
}

.h6 { width: hypot(3px, 4); }
.h7 { width: hypot(); }
.h8 { width: calc(hypot(3, 4) * 40px); }