CSS types.tan() Function

Last Updated : 24 Apr, 2025

The CSS tan() function returns the tangent of a specified angle in radians. In other words, it returns the ratio of the length of the opposite side to the length of the adjacent side in a right triangle. The value of the tangent will range between −infinity and infinity.

Syntax of CSS type tan():

/* angle values */
width: calc(100px * tan(30deg));
width: calc(100px * tan(0.25turn));
width: calc(100px * tan(0.398163rad));

/* number values */
width: calc(100px * tan(0.73502));
width: calc(100px * tan(2.732 – 1));

/* Other values */
width: calc(100px * tan(pi / 4));
width: calc(100px * tan(e / 2));

Parameter: The function takes one parameter:

angle: A angle value representing the angle in radians for which the tangent should be calculated.

Return value: The return value of the tan() function is a <number> value, representing the tangent of the specified angle.

Example 1: This example illustrates setting the skewness based on the tan value.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .container { 
          height: 200px; 
          width: 200px; 
          background-color: green; 
          transform: rotate(45deg) skew(20deg) scale(1, tan(20deg)); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
          GeeksforGeeks 
      </h1> 
    <h2>tan() function</h2> 
    <div class="container"> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example illustrates the use of the tan() function to set the left of the element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .box { 
            width: 100px; 
            height: 100px; 
            background-color: green; 
            position: absolute; 
            top: 50px; 
            left: calc(30% + 50px * tan(30deg)); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h2>tan() function</h2> 
    <div class="box"> 
        GeeksforGeeks 
    </div> 
</body> 
  
</html>