Sincerely, Evan

Just another bloggete

CSS Triangle
12 Mar 2016 | Comment


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: , ,

about

Hi, I'm Evan and I maintain this blog with my occasional musings. Apart from writing, I like being occupied with anything artsy, I enjoy the company of books and I like unleashing my inner nerd through occasional coding. My ideal day would be holding a book in one hand, matcha in the other, ears plugged and a cat purring on my lap.

links