CSS-функція tan() — тангенс кута в обчисленнях calc()

HTML

<div id="description">
  <h2>Приклад 2</h2>
  <p>Використання функції tan() для змінення розмірів елементів</p>
</div>

<div id="result">
  <div class="box"></div>
  <div class="box transformed"></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;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 10px;
}

.transformed {
  width: calc(100px * tan(45));
}

HTML

<div id="description">
  <h2>Приклад 1</h2>
  <p>Малювання паралелограмів за допомогою функції tan()</p>
</div>

<div id="result">
  <div class="parallelogram"></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;
}

.parallelogram {
  --w: 400;
  --h: 200;
  --angle: 30deg;
  position: relative;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}

.parallelogram::before {
  content: "";
  position: absolute;
  width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
  height: 100%;
  transform-origin: 0 100%;
  transform: skewX(calc(0deg - var(--angle)));
  background-color: red;
}

HTML

<h4 class="cap">1. Місце під скіс = ширина ÷ 2 × tan(кут)</h4>
<div class="cols">
    <div class="col">
        <div class="wrap good">
            <div class="band">смуга, скошена на 20°</div>
        </div>
        <p class="under">Цей текст не налазить на смугу: у контейнера є
            <code>padding-bottom: calc(130px * tan(20deg))</code>, тобто
            рівно стільки, на скільки опустився правий край.</p>
        <p class="verdict ok">так правильно</p>
    </div>
    <div class="col">
        <div class="wrap bad">
            <div class="band">та сама смуга</div>
        </div>
        <p class="under">А тут місця не додали. Скіс — це трансформація, і в
            потоці смуга досі займає свої 70 пікселів заввишки, тому текст
            заповз під неї.</p>
        <p class="verdict no">так неправильно</p>
    </div>
</div>

<h4 class="cap">2. Висота трикутника з ширини й кута</h4>
<div class="tri-row">
    <div class="tri t30"><span>30°</span></div>
    <div class="tri t45"><span>45°</span></div>
    <div class="tri t60"><span>60°</span></div>
</div>
<p class="note">Ширина в усіх трьох однакова — 120px, задано лише кут.
    Висоту рахує <code>calc(120px * tan(кут))</code>: 69.3px, 120px і 207.8px.
    Саме тому в трикутника з 60° картка найвища.</p>

CSS

.wrap {
    --kut: 20deg;
    --shyryna: 130px;
    width: calc(var(--shyryna) * 2);
    /* угорі місце потрібне завжди: лівий край піднявся рівно на стільки ж */
    margin: calc(var(--shyryna) * tan(var(--kut))) 0 4px;
}

.wrap.good {
    padding-bottom: calc(var(--shyryna) * tan(var(--kut)));
}

.band {
    height: 70px;
    padding: 24px 0 0 14px;
    background: #dbe6f5;
    border: 2px solid #2f6fd0;
    border-radius: 4px;
    transform: skewY(var(--kut));
    box-sizing: border-box;
}

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.col {
    flex: 1 1 320px;
    max-width: 340px;
}

.under {
    margin: 0;
    font-size: .9em;
}

.verdict {
    margin: 10px 0 0;
    font-weight: 700;
    font-size: .85em;
}

.verdict.ok {
    color: #29713a;
}

.verdict.no {
    color: #b23a3a;
}

.tri-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.tri {
    --shyryna: 120px;
    width: var(--shyryna);
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    text-align: center;
}

.tri span {
    display: block;
    padding: 4px 0;
    font-size: .85em;
    color: #5a6472;
}

.tri::after {
    content: "";
    display: block;
    background: linear-gradient(to bottom right, #dbe6f5, #2f6fd0);
    border-radius: 0 0 5px 5px;
}

.t30::after {
    height: calc(var(--shyryna) * tan(30deg));
}

.t45::after {
    height: calc(var(--shyryna) * tan(45deg));
}

.t60::after {
    height: calc(var(--shyryna) * tan(60deg));
}

.cap {
    margin: 24px 0 10px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}