![[css3.svg]](/images/logo/css3.svg)
CSS - How to draw a triangle
Just the code:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 87px solid blue;
}
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 87px solid blue;
}
This creates an equilateral triange, where each side is 100 pixels in length.
We use the formula: 100 * Sin(60) to calculate the triangle's height, which is 87.
We use the formula: 100 * Sin(60) to calculate the triangle's height, which is 87.
How it works:
1) Start with a square.
.triangle {
width: 100px;
height: 100px;
border: 2px solid purple;
} height: 100px;
border: 2px solid purple;
2) Give each border a different color.
.triangle {
width: 100px;
height: 100px;
height: 100px;
border: 2px solid purple;
border-top: 2px solid red;
border-left: 2px solid orange;
border-right: 2px solid green;
border-bottom: 2px solid blue;
} border-left: 2px solid orange;
border-right: 2px solid green;
border-bottom: 2px solid blue;
3) Set the border size to half the triangle width.
.triangle {
width: 100px;
height: 100px;
height: 100px;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
} border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
4) Set the element width and height to zero.
.triangle {
width: 0;
height: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
} border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
5) Remove the top border.
.triangle {
width: 0;
height: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-right: 50px solid green;
border-bottom: 50px solid blue;
} 6) Make the left and right borders transparent.
.triangle {
width: 0;
height: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
} 7) Change the triangle height to make it equilateral.
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 87px solid blue;
} This creates an equilateral triange, where each side is 100 pixels in length.
We use the formula: 100 * Sin(60) to calculate the triangle's height, which is 87.
We use the formula: 100 * Sin(60) to calculate the triangle's height, which is 87.