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
See the Pen CSS triangles by Naomi Blindeman (@blindeman) on CodePen.0
Read more: @CSS-TRICKS by Chris Coyier
I found this very helpful. I would not have thought of any of it.