CSS Tan Function Basic

<!DOCTYPE html>
<title>My Example</title>

.tan-box {
    position: relative;
    background-color: #e9ecef;
    border: 2px solid #6c757d;
    width: var(--base-width);
    
    /* 
      Calculate the unknown height using tan().
      Formula: Height = Width * tan(Angle)
    */
    height: calc(var(--base-width) * tan(var(--angle)));
    
    transition: height 0.5s ease;
    cursor: pointer;
  }

.diagonal-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%; /* Make it extra long so it covers the distance */
    height: 2px;
    background-color: #0d6efd;
    transform-origin: bottom left;
    
    /* Rotate the line to match our angle */
    transform: rotate(calc(var(--angle) * -1));
    transition: transform 0.5s ease;
  }
  
  .label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    color: #343a40;
  }

/* Change the angle on hover to see the height recalculate */
  .tan-container:hover .tan-box {
    --angle: 45deg;
  }
</style>

<div class="tan-container">
  <div class="tan-box">
    <div class="diagonal-line"></div>
    <div class="label">Hover to change angle</div>
  </div>
</div>