Triangles with CSS

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

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:

...

CSS Rhombus Shape <<-- Previous ----- Next -->> Circle and Oval with ..

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used in <table> to create table header cell?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Which CSS property sets the distance between lines?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Which function opens a new browser window.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicate the PHP function that returns an array with names of the files and folders inside a directory.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);

Triangles with CSS

CSS

Triangle Up

Triangle Down

Triangle Left

Triangle Right

Triangle Top-Left

Triangle Top-Right

Triangle Bottom-Left

Triangle Bottom-Right

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month