Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
math

18 Articles
{
,

}
A grid of hexagon shapes of equal size that alternate between blue and red. Each shape is labelled by it's order in the grid.
Direct link to the article Responsive Hexagon Grid Using Modern CSS
CSS functions math shapes

Responsive Hexagon Grid Using Modern CSS

A while back, Temani tacked a repeating grid of hexagon shapes. Well, he's updated it with modern CSS features that result in fewer magic numbers. And it's impressive!
Image
Temani Afif on Jan 23, 2026
Image
Direct link to the article atan2()
math

atan2()

The atan2() trigonometric function takes two values (Y, X) and returns its inverse for the atan() function.
Image
Juan Diego Rodríguez on Dec 18, 2025
Image
Direct link to the article atan()
math trigonometry

atan()

The atan() trigonometric function takes a number and returns its inverse for the tan() function
Image
Juan Diego Rodríguez on Dec 18, 2025
Image
Direct link to the article asin()
math

asin()

The asin() trigonometric function takes a number and returns its inverse for the sin() function.
Image
Juan Diego Rodríguez on Dec 16, 2025 Updated on Dec 18, 2025
Image
Direct link to the article acos()
math

acos()

The acos() trigonometric function takes a number and returns its inverse for the cos() function.
Image
Juan Diego Rodríguez on Dec 16, 2025 Updated on Dec 18, 2025
A unit circle placed on an X-Y graph at the center with the coordinates 1, 1 labelled. The resulting lines of various trigonometric functions are drawn around the coordinates.
Direct link to the article The “Most Hated” CSS Feature: asin(), acos(), atan() and atan2()
math

The “Most Hated” CSS Feature: asin(), acos(), atan() and atan2()

If we have a ratio that represents the sine, cosine or tangent of an angle, how can we get the original angle? This is where inverse trigonometric functions come in!
Image
Juan Diego Rodríguez on Nov 17, 2025
Image
Direct link to the article The “Most Hated” CSS Feature: tan()
CSS functions math

The “Most Hated” CSS Feature: tan()

Last time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed the “Most Hated” CSS feature.…

Image
Juan Diego Rodríguez on Nov 3, 2025
Image
Direct link to the article tan()
math

tan()

The CSS tan() function takes a calculation that resolves to either an <angle> or <tnumber> and returns the result's tangent, which ranges between -Infinity and Infinity.
Image
Juan Diego Rodríguez on Oct 30, 2025 Updated on Dec 18, 2025
Image
Direct link to the article calc()
math

calc()

The CSS calc() function performs math between values, whether that's addition, subtraction, division, or multiplication, along with any other math function.
Image
Gabriel Shoyombo on Oct 16, 2025 Updated on Sep 25, 2025
  • 1
  • 2
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement