Posted over 2 years ago
tlnt.co/p/BK

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

Comments

Default_thumb
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.

8 months 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

Liked_post_header
Default_speck