Create a triangle shape with HTML and CSS

Create a triangle up, down, left or right with HTML and CSS



Add class triangle up with a bit of css code bellow:

.triangle {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 250px solid #18C973;
}


In HTML code:



To create a triangle down shape like this:



You just change the border-bottom property to border-top

.triangle {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 250px solid #18C973;
}


With the triangle left:

.triangle {
  width: 0;
  height: 0;
  border-top: 150px solid transparent;
  border-bottom: 150px solid transparent;
  border-right: 250px solid #18C973;
}


And for the triangle right:

.triangle {
  width: 0;
  height: 0;
  border-top: 150px solid transparent;
  border-bottom: 150px solid transparent;
  border-left: 250px solid #18C973;
}


View more: Create an oval shape with HTML and CSS

csscss trianglehtmlhtml triangle

© 2019 4codev

Created with love by Sil.