CSS Trigonometric functions are supported in the latest versions of Safari, Firefox, Edge, and Chrome. We also discuss animation via @property, which is supported in the latest Safari, Edge, and Chrome (as of this writing).The CSS Shapes specification enabled a lot to make interesting shapes on the web today, via clip-path, shape-outside, and more. With the introduction of CSS Trigonometric functions, we can simplify how we make regular polygons and build even more complex shapes by more easily approximating curves.
Even though what we discuss will apply to more, we will focus this discussion applying trigonometry to the clip-path property. We will start with an overview of how to work with basic clip paths and a quick discussion on the math side of trigonometry. However, you can always skip to where we combine trigonometric functions and clip paths and dig into the demos.
With clip paths and Basic Shapes functions, we can take our rectangular elements and define a shape where only portions of our element will be visible.

There are a few key functions, but circle(), ellipse(), and polygon() are likely the most straightforward ways to clip to basic shapes.
As the names state, we can create rounded clips via circle and ellipse, and we are able to clip our element to any polygon shape with polygon() by passing in a collection of coordinates. Any valid length or percentage can be used to define the radius and center points for circles and ellipses, as well as for coordinates within polygons.