promotion

Wednesday, February 25, 2015

CSS Triangle

Here are the simple example of css triangles:
Note: Before writing CSS, first create div tag with class 'triangle'.
<div class="triangle"></div>
Triangle Up:
.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}
Output:
Triangle Down:
.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}
Output:
Triangle Left:
.triangle{
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid red;
}
Output:
Triangle Right:
.triangle{
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid red;
}
Output:
Top Left Triangle:
.triangle{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}
Output:
Top Right Triangle:
.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-top: 50px solid red;
}
Output:
Bottom Left Triangle:
.triangle{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}
Output:
Bottom Right Triangle:
.triangle{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-bottom: 50px solid red;
}
Output:
Finally combine four triangles:
.triangle{
  width: 0px;
  height: 0px;
  border-top: 100px solid #0099ff;
  border-left: 100px solid #ff9900;
  border-right: 100px solid #F6402D;
  border-bottom: 100px solid #8CC63E;
}
Output:

No comments:

Post a Comment