A triangle is a polygon with three sides and three vertices. In frontend work, triangles provide the geometric foundation for relating angles to direction, slope, and position, especially through right-angled triangles. section 9.1.1 section 1.4.7
Use a right triangle to connect an angle θ with its side ratios:
- Sine measures verticalness: sin(θ) = opposite / hypotenuse. section 9.1.1
- Cosine measures horizontalness: cos(θ) = adjacent / hypotenuse. section 9.1.1
- Tangent measures steepness: tan(θ) = opposite / adjacent = sin(θ) / cos(θ). section 9.1.1
- Apply these relationships to rotations, circular layouts, arcs, paths, and movement directions in CSS or JavaScript. section 1.4.7 section 9.0
A 45-degree direction
For a point on the unit circle at 45°, cos(θ) ≈ 0.707, sin(θ) ≈ 0.707, and tan(θ) = 1. The equal sine and cosine values indicate equal horizontal and vertical components; the tangent value indicates a slope of one. section 9.1.1
