Posted over 5 years ago

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

You might also like

The future of CSS layouts
Two New Proposals to Solve the CSS3 Vendor Prefix Crisis
CSS3 Loading Animation


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