The “Most Hated” CSS Function: tan()

Final time, we mentioned that, sadly, in accordance with the State of CSS 2025 survey, trigonometric features are deemed the “Most Hated” CSS characteristic.

That shocked me. I could have even been just a little offended, being a math nerd and all. So, I wrote an article that attempted to showcase a number of makes use of particularly for the cos() and sin() features. Right now, I need poke at one other one: the tangent operate, tan().

Earlier than attending to examples, we have now to ask, what’s tan() within the first place?

The mathematical definition

The best technique to outline the tangent of an angle is to say that it is the same as the sine divided by its cosine.

Once more, that’s a reasonably easy definition, one which doesn’t give us a lot perception into what a tangent is or how we will use it in our CSS work. For now, keep in mind that tan() comes from dividing the angles of features we checked out within the first article.

In contrast to cos() and sin() which have been paired with plenty of circles, tan() is most helpful when working with triangular shapes, particularly a right-angled triangle, that means it has one 90° angle:

If we decide one of many angles (on this case, the bottom-right one), we have now a complete of three sides:

• The adjoining facet (the one touching the angle)
• The reverse facet (the one away from the angle)
• The hypotenuse (the longest facet)

Talking in these phrases, the tan() of an angle is the quotient — the divided outcome — of the triangle’s reverse and adjoining sides:

If the alternative facet grows, the worth of tan() will increase. If the adjoining facet grows, then the worth of tan() decreases. Drag the corners of the triangle within the following demo to stretch the form vertically or horizontally and observe how the worth of tan() adjustments accordingly.

Now we will begin really poking at how we will use the tan() operate in CSS. I believe a great way to start out is to have a look at an instance that arranges a collection of triangles into one other form.

Sectioned lists

Think about we have now an unordered listing of parts we wish to organize in a polygon of some kind, the place every aspect is a triangular slice of the polygonal pie.

So, the place does tan() come into play? Let’s begin with our setup. Like final time, we have now an on a regular basis unordered listing of listed listing objects in HTML:

<ul type="--total: 8">
  <li type="--i: 1">1</li>
  <li type="--i: 2">2</li>
  <li type="--i: 3">3</li>
  <li type="--i: 4">4</li>
  <li type="--i: 5">5</li>
  <li type="--i: 6">6</li>
  <li type="--i: 7">7</li>
  <li type="--i: 8">8</li>
</ul>

Observe: This step will develop into a lot simpler and concise when the sibling-index() and sibling-count() features acquire help (and they’re actually neat). I’m hardcoding the indexes with inline CSS variables within the meantime.

So, we have now the --total variety of objects (8) and an index worth (--i) for every merchandise. We’ll outline a radius for the polygon, which you’ll be able to consider because the top of every triangle:

:root {
  --radius: 35vmin;
}

Only a smidge of sunshine styling on the unordered listing in order that it’s a grid container that locations all the objects within the actual middle of it:

ul {
  show: grid;
  place-items: middle;
}

li {
  place: absolute;
}

Now we will measurement the objects. Particularly, we’ll set the container’s width to 2 instances the --radius variable, whereas every aspect shall be one --radius broad.

ul {
  /* similar as earlier than */
  show: grid;
  place-items: middle;
  /* width equal to 2 instances the --radius */
  width: calc(var(--radius) * 2);
  /* preserve a 1:1 facet ratio to kind an ideal sq. */
  aspect-ratio: 1;
}

li {
  /* similar as earlier than */
  place: absolute;
  /* every triangle is sized by the --radius variable */
  width: var(--radius);
}

Nothing a lot up to now. We now have a sq. container with eight rectangular objects in it that stack on prime of each other. Meaning all we see is the final merchandise within the collection because the relaxation are hidden beneath it.

We wish to place the weather across the container’s middle level. We now have to rotate every merchandise evenly by a sure angle, which we’ll get by dividing a full circle, 360deg, by the overall variety of parts, --total: 8, then multiply that worth by every merchandise’s inlined index worth, --i, within the HTML.

li {
  /* rotation equal to a full circle divided complete objects instances merchandise index */
  --rotation: calc(360deg / var(--total) * var(--i));
  /* rotate every merchandise by that quantity */
  rework: rotate(var(--rotation));
}

Discover, nonetheless, that the weather nonetheless cowl one another. To repair this, we transfer their transform-origin to left middle. This strikes all the weather just a little to the left when rotating, so we’ll need to translate them again to the middle by half the --radius earlier than making the rotation.

li {
  rework: translateX(calc(var(--radius) / 2)) rotate(var(--rotation));
  transform-origin: left middle;

  /* Not this: */
  /* rework: rotate(var(--rotation)) translateX(calc(var(--radius) / 2)); */
}

This provides us a type of sunburst form, however it’s nonetheless removed from being an precise polygon. The very first thing we will do is clip every aspect right into a triangle utilizing the clip-path property:

li {
  /* ... */
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

It type of seems to be like Wheel of Fortune however with gaps between every panel:

We wish to shut these gaps. The following factor we’ll do is improve the peak of every merchandise in order that their sides contact, making an ideal polygon. However by how a lot? If we have been fidgeting with arduous numbers, let’s imagine that for an octagon the place every aspect is 200px broad, the proper merchandise top could be 166px tall:

li {
  width: 200px;
  top: 166px;
}

However what if our values change? We’d need to manually calculate the brand new top, and that’s no good for maintainability. As a substitute, we’ll calculate the proper top for every merchandise with what I hope shall be your new favourite CSS operate, tan().

I believe it’s simpler to see what that appears like if we dial issues again a bit and create a easy sq. with 4 objects as a substitute of eight.

Discover that you can imagine every triangle as a pair of two proper triangles pressed proper up towards one another. That’s necessary as a result of we all know that tan() is basically, actually good for working with proper angles.

Hmm, if solely we knew what that angle close to the middle is the same as, then we might discover the size of the triangle’s reverse facet (the peak) utilizing the size of the adjoining facet (the width).

We do know the angle! If every of the 4 triangles within the container could be divided into two proper triangles, then we all know that the eight complete angles ought to equal a full circle, or 360°. Divide the total circle by the variety of proper angles, and we get 45° for every angle.

Again to our basic polygons, we might translate that to CSS like this:

li {
  /* get the angle of every bisected triangle */
  --theta: calc(360deg / 2 / var(--total));
  /* use the tan() of that worth to calculate good triangle top */
  top: calc(2 * var(--radius) * tan(var(--theta)));
}

Now we at all times have the proper top worth for the triangles, it doesn’t matter what the container’s radius is or what number of objects are in it!

And verify this out. We will play with the transform-origin property values to get totally different sorts of shapes!

This seems to be cool and all, however we will use it in a sensible means. Let’s flip this right into a round menu the place every merchandise is an choice you may choose. The primary concept that involves thoughts for me is a few type of character picker, kinda just like the character wheel in Grand Theft Auto V:

…however let’s use extra, say, huggable characters:

You could have seen that I went just a little fancy there and minimize the total container right into a round form utilizing clip-path: circle(50% at 50% 50%). Every merchandise remains to be a triangle with arduous edges, however we’ve clipped the container that holds all of them to present issues a rounded form.

We will use the very same thought to make a polygon-shaped picture gallery:

This idea will work possibly 99% of the time. That’s as a result of the maths is at all times the identical. We now have a proper triangle the place we all know (1) the angle and (2) the size of one of many sides.

tan() within the wild

I’ve seen the tan() operate utilized in plenty of different nice demos. And guess what? All of them depend on the very same thought we checked out right here. Go verify them out as a result of they’re fairly superior:

• Nils Binder has this nice diagonal structure.
• Sladjana Stojanovic’s tangram puzzle structure makes use of the idea of tangents.
• Temani Afif makes use of triangles in a bunch of CSS patterns.
• Actually, Temani is a superb supply of trigonometric examples! You’ll see tan() pop up in most of the issues he makes, like flower shapes or trendy breadcrumbs.

Bonus: Tangent in a unit circle

Within the first article, I talked quite a bit in regards to the unit circle: a circle with a radius of 1 unit:

We have been capable of transfer the radius line in a counter-clockwise path across the circle by a sure angle which was demonstrated on this interactive instance:

We additionally confirmed how, given the angle, the cos() and sin() features return the X and Y coordinates of the road’s endpoint on the circle, respectively:

We all know now that tangent is expounded to sine and cosine, due to the equation we used to calculate it within the examples we checked out collectively. So, let’s add one other line to our demo that represents the tan() worth.

If we have now an angle, then we will solid a line (let’s name it L) from the middle, and its level will land someplace on the unit circle. From there, we will draw one other line perpendicular to L that goes from that time, outward, alongside X-axis.

After taking part in round with the angle, chances are you’ll discover two issues:

1. The tan()worth is simply optimistic within the top-right and bottom-left quadrants. You may see why should you take a look at the values of cos() and sin() there, since they divide with each other.
2. The tan() worth is undefined at 90° and 270°. What can we imply by undefined? It means the angle creates a parallel line alongside the X-axis that’s infinitely lengthy. We are saying it’s undefined because it might be infinitely giant to the proper (optimistic) or left (detrimental). It may be each, so we are saying it isn’t outlined. Since we don’t have “undefined” in CSS in a mathematical sense, it ought to return an unreasonably giant quantity, relying on the case.

Extra trigonometry to come back!

To this point, we have now coated the sin() cos() and tan() features in CSS, and (hopefully) we efficiently confirmed how helpful they are often in CSS. Nonetheless, we’re nonetheless lacking the bizarro world of trigonometric features: asin(), acos(), atan() atan2().

That’s what we’ll take a look at within the third and last a part of this collection on the “Most Hated” CSS characteristic of all of them.

The “Most Hated” CSS Function: tan() initially revealed on CSS-Tips, which is a part of the DigitalOcean household. You must get the publication.