Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

351K
active users

mastodon.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-nightly.2025-03-25

Ana Tudor 🐯

Ever want a pure CSS regular ?

Back in 2016, I first wrote this to generate one. I've had others before, but this is the one I've kept updating it ever since and it's heavily commented.

You just need to pass it a number of vertices and an initial rotation.

@codepen demo: codepen.io/thebabydino/pen/mEg

Screenshot. Shows calling the mixin with: ``` @include polygon(6) ``` This creates a regular polygon with 6 vertices and 6 edges (regular hexagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) not set, which means it falls back on the default value, which is -90° for polygons with an odd number of vertices and -90° + .5·ba, where ba is the base angle corresponding to a polygon edge.
Screenshot. Shows calling the mixin with: ``` @include polygon(6) ``` This creates a regular polygon with 6 vertices and 6 edges (regular hexagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) not set, which means it falls back on the default value, which is -90° for polygons with an odd number of vertices and -90° + .5·ba, where ba is the base angle corresponding to a polygon edge.
Screenshot. Shows calling the mixin with: ``` @include polygon(5, 0deg) ``` This creates a regular polygon with 5 vertices and 5 edges (regular pentagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) set to 0°.
Screenshot. Shows calling the mixin with: ``` @include polygon(10, 9deg) ``` This creates a regular polygon with 10 vertices and 10 edges (regular decagon) and with the offset angle (the angle of the circumcircle radius to the first vertex) set to 9°.
#CSS#clipPath#geometry
Sep 12, 2024, 02:39 PM·Public
1boost·1favorite
ExploreLive feeds
About