CSS types.tan() Function
Last Updated :
10 Feb, 2023
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 >
|
Output:
Â
Supported browsers: The browsers supported by the tan() function are listed below:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...