CSS triangles

What: Making triangles using CSS

How: The basic idea is a box with width and height set to zero.
You set the four borders, three of which you make transparent.
Border-width then decides the size of the triangle and giving the different sides different border-widths changes the shape of the triangle.

Thoughts: You don’t have to set the border-color to transparent. You have to make the sides you don’t want to see invisible. For CSSBattle 7 target 34 I set the border-color for the sides I didn’t want to see to the background-color of the container, because a hex color value takes less characters than the word transparent.
If you’re using it on a live site though, setting it to transparent is probably better. If the background-color of the container changes you won’t have to change the border-color and the container might not have a solid color as a background, it might have a photo or a pattern as a background.

Codepen: CSS triangles

[codepen_embed height=”362″ theme_id=”0″ slug_hash=”WVZMYw” default_tab=”result” user=”blindeman”]See the Pen <a href=’https://codepen.io/blindeman/pen/WVZMYw/’>CSS triangles</a> by Naomi Blindeman (<a href=’https://codepen.io/blindeman’>@blindeman</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Read more: @CSS-TRICKS by Chris Coyier