[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;
}
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.

How it works:

1) Start with a square.
.triangle {
  width: 100px;
  height: 100px;
  border: 2px solid purple;
}
2) Give each border a different color.
.triangle {
  width: 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;
}
3) Set the border size to half the triangle width.
.triangle {
  width: 100px;
  height: 100px;
  border-top: 50px solid red;
  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;
  border-top: 50px solid red;
  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;
  border-top: 50px solid red;
  border-left: 50px solid orange;
  border-right: 50px solid green;
  border-bottom: 50px solid blue;
}
6) Make the left and right borders transparent.
.triangle {
  width: 0;
  height: 0;
  border-left: 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;
  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.

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath