CSS types.tan() Function
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;" > w3wiki </ 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;" > w3wiki </ h1 > < h2 >tan() function</ h2 > < div class = "box" > w3wiki </ div > </ body > </ html > |
Output:
Supported browsers: The browsers supported by the tan() function are listed below:
- Firefox 16.0
- Safari 15.4
Contact Us