• 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 meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Triangles with CSS

Last accessed pages

  1. Create simple Website with PHP (20288)
  2. Triangles with CSS (2198)
  3. CSS3 transition (1404)
  4. Register and show online users and visitors (25030)
  5. JavaScript code and PHP (21276)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (587)
  2. Read Excel file data in PHP - PhpExcelReader (518)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (492)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (420)
  5. PHP getElementById and getElementsByTagName (351)