It’s the second part of CSS Shapes. In this tutorial we are discussing about drawing another CSS Shapes – Triangle. Triangles also can be used as arrow as per your requirements. You can find the formula to create an equal sided triangle at the end of article.
You can visit other parts of tutorial here:
- CSS Shapes – Circle
- CSS Shapes – Triangle
- CSS Shapes – Square Rectangle Parallelogram Trapezoid and Polygons
- CSS Shapes – Diamond and Star
- CSS Shapes – Chart and Ribbon
- Different CSS Shapes
Triangles: Up, Down, Left, Right
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #up-triangle { width: 0; height: 0; border-bottom: 140px solid #103252; border-left: 70px solid transparent; border-right: 70px solid transparent; } #down-triangle { width: 0; height: 0; border-top: 140px solid #103252; border-left: 70px solid transparent; border-right: 70px solid transparent; } #left-triangle { width: 0; height: 0; border-right: 140px solid #103252; border-top: 70px solid transparent; border-bottom: 70px solid transparent; } #right-triangle { width: 0; height: 0; border-left: 140px solid #103252; border-top: 70px solid transparent; border-bottom: 70px solid transparent; } |
Traingles: Top Right, Top Left, Bottom Right, Bottom Left
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #triangle-top-right { width: 0; height: 0; border-top: 140px solid #103252; border-left: 140px solid transparent; } #triangle-top-left { width: 0; height: 0; border-top: 140px solid #103252; border-right: 140px solid transparent; } #triangle-bottom-right { width: 0; height: 0; border-bottom: 140px solid #103252; border-left: 140px solid transparent; } #triangle-bottom-left { width: 0; height: 0; border-bottom: 140px solid #103252; border-right: 140px solid transparent; } |
To draw an equilateral triangle shape with CSS just note that the height is 86.6% of the width so just set
border-bottom-width = (border-left-width + border-right-width) * 0.866