• Triangle Down         • Triangle Left              • Triangle Right
  • Triangle Top-Left     • Triangle Top-Right     • Triangle Bottom-Left
  • Triangle Bottom-Right

Various triangle shapes with CSS, created only with a sinlge DIV tag and a few CSS properties.

Triangle Up

Code:
<style type="text/css">
#triangleup {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid blue;
}
</style>

<div id="triangleup"><br/><br/><br/>>UP</div>
Demo:



UP

Triangle Down

Code:
<style type="text/css">
#triangledown {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid blue;
}
/* For the content in triangle */
#triangledown div{ margin:-85px 0 0 -20px; }
</style>

<div id="triangledown"><div>DOWN</div></div>
Demo:
DOWN

Triangle Left

Code:
<style type="text/css">
#triangleleft {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;
 border-right: 100px solid blue;
}
/* For the content in triangle */
#triangleleft div{ margin:-10px 0 0 25px; }
</style>

<div id="triangleleft"><div>LEFT</div></div>
Demo:
LEFT

Triangle Right

Code:
<style type="text/css">
#triangleright {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;
 border-left: 100px solid blue;
}
/* For the content in triangle */
#triangleright div{ margin:-10px 0 0 -85px; }
</style>

<div id="triangleright"><div>RIGHT</div></div>
Demo:
RIGHT

Triangle Top-Left

Code:
<style type="text/css">
#triangletopleft {
 width: 0;
 height: 0;
 border-top: 100px solid blue;
 border-right: 50px solid transparent;
}
</style>

<div id="triangletopleft">...</div>
Demo:
...

Triangle Top-Right

Code:
<style type="text/css">
#triangletopright {
 width: 0;
 height: 0;
 border-top: 100px solid blue;
 border-left: 50px solid transparent;
}
</style>

<div id="triangletopright">...</div>
Demo:
...

Triangle Bottom-Left

Code:
<style type="text/css">
#trianglebottomleft {
 width: 0;
 height: 0;
 border-bottom: 100px solid blue;
 border-right: 50px solid transparent;
}
</style>

<div id="trianglebottomleft">...</div>
Demo:
...

Triangle Bottom-Right

Code:
<style type="text/css">
#trianglebottomright {
 width: 0;
 height: 0;
 border-bottom: 100px solid blue;
 border-left: 50px solid transparent;
}
</style>

<div id="trianglebottomright">...</div>
Demo:
...

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Triangles with CSS

Last accessed pages

  1. Register and show online users and visitors (31125)
  2. Contact page - CoursesWeb (36665)
  3. Tabs effect with CSS (37306)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (44270)
  5. innerHTML in PHP (9786)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2222)
  2. Contact page - CoursesWeb (2124)
  3. Tabs effect with CSS (2116)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (846)
  5. PHP getElementById and getElementsByTagName (773)