CSS Triangle comment
12.3.16

CSS triangles are one of the easiest shapes to code.

Here's how;
The HTML

<div class="triangle"></div>

The CSS

.triangle {
  width:0;  height:0;  border-width:10px;
  border-style:solid;
  border-color: black transparent transparent transparent;}

note: width:0; and height:0; gives you a plain square which is basically made up of four sets of equilateral triangles.
note: border-color: top right bottom left;  (clockwise)

Referring to the notes above, we can make right, bottom and left triangles too by just altering the values in the border-color property.


.triangle {
  width:0;
  height:0;
  border-width:50px;
  border-style:solid;
  border-color: transparent black transparent transparent;}
.triangle {
  width:0;
  height:0;
  border-width:50px;
  border-style:solid;
  border-color: transparent transparent black transparent;}

.triangle {
  width:0;
  height:0;
  border-width:50px;
  border-style:solid;
  border-color: transparent transparent transparent black;}


Labels: , ,