<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 80px;
background-color: pink;
}
div.a {
width: calc(100px * tan(45deg));
}
div.b {
width: calc(100px * tan(0.125turn));
}
div.c {
width: calc(100px * tan(0.5773502));
}
div.d {
width: calc(100px * tan(pi / 3));
}
</style>
</head>
<body>
<h1>The tan() Function</h1>
<p>Use tan() to set the width of elements:</p>
<h2>width: calc(100px * tan(45deg)):</h2>
<div class="a">Hello World!</div>
<br>
<h2>calc(100px * tan(0.125turn)):</h2>
<div class="b">Hello World!</div>
<br>
<h2>width: calc(100px * tan(0.5773502)):</h2>
<div class="c">Hello World!</div>
<h2>width: calc(100px * tan(pi / 3)):</h2>
<div class="d">Hello World!</div>
</body>