"If we pick one of the angles (in this case, the bottom-right angle), we have a total of three sides: The adjacent side (the one touching the angle) The opposite side (the one away from the angle) The hypotenuse (the longest side) Speaking in those terms, the tan() of an angle is the quotient - the divided result - of the triangle's opposite and adjacent sides:"
"Note: This step will become much easier and concise when the sibling-index() and sibling-count() functions gain support (and they're really neat). I'm hardcoding the indexes with inline CSS variables in the meantime. So, we have the --total number of items ( 8) and an index value (--i) for each item. We'll define a radius for the polygon, which you can think of as the height of each triangle: :root { --radius: 35vmin; }"
tan() equals sine divided by cosine and represents the tangent of an angle. In a right triangle, the three sides are adjacent, opposite, and hypotenuse. The tangent of an angle is the opposite side divided by the adjacent side. CSS can use tan() to compute geometric dimensions for layout tasks, such as assembling triangular list items into a polygonal shape. The example uses an unordered list with hardcoded index variables (--i) and a --total count of 8. A radius variable (--radius: 35vmin) defines each triangle's height. Future sibling-index() and sibling-count() functions will simplify indexing.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]