Posted over 5 years ago

All the primary shapes done via CSS styles for your viewing and using pleasure.

You might also like

Crafting Minimal Circular 3D Buttons with CSS
Well Rounded: Compound Shapes in CSS
A Modest Proposal for CSS3 Animations


Dave Everitt

Interesting. Now I want to see an equilateral triangle… Although I wonder how much of this will be superseded by SVG.

Actually, just worked out that the height of an equilateral triangle is 86.6% of its width, so ((border-left-width + border-right-width) * 86.6 )/100 = border-bottom-width:

  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid red;

The width is 115.470054% of a given height, and using em gives you more precision with the floats.

over 3 years ago   Like_icon 0 likes  

Talentopoly Newsletter

A once-weekly round-up of the best programming and design posts.

Join 2050+ subscribers

We will never spam or share your email address. Easily unsubscribe