• Pentagon
  • Hexagon
  • Octagon

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

Parallelogram

- The content in parallelogram is distorted according to its shape.
Code:
<style type="text/css">
#parallelogram{
 margin:5px 0 5px 20px;
 width: 150px;
 height: 100px;
 -webkit-transform: skew(20deg);
 -moz-transform: skew(20deg);
 -o-transform: skew(20deg);
 background: #abcdef;
}
</style>

<div id="parallelogram">Web Programming Courses<br/>http://CoursesWeb.net</div>
Demo:
Web Programming Courses
http://CoursesWeb.net

Pentagon

Code:
<style type="text/css">
#pentagon {
 margin:70px 0 5px 20px;
 position: relative;
 width: 110px;
 border-width: 100px 36px 0;
 border-style: solid;
 border-color: #abefcd transparent;
}
#pentagon:before {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: -170px;
 left: -36px;
 border-width: 0 90px 70px;
 border-style: solid;
 border-color: transparent transparent #abefcd;
}

/* Content in pentagon */
#pentagon div{
 position:absolute;
 top:-50px;
}
</style>

<div id="pentagon"><div>CoursesWeb.net</div></div>
Demo:
CoursesWeb.net

Hexagon

Code:
<style type="text/css">
#hexagon {
 width: 100px;
 height: 55px;
 background: #cdabef;
 position: relative;
}
#hexagon:before {
 content: "";
 position: absolute;
 top: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid #cdabef;
}
#hexagon:after {
 content: "";
 position: absolute;
 bottom: -25px; left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 25px solid #cdabef;
}
</style>

<div id="hexagon">MarPlo.net</div>
Demo:

MarPlo.net

Octagon

Code:
<style type="text/css">
#octagon {
 width: 100px;
 height: 100px;
 background: #a0e8a1;
 position: relative;
}
#octagon:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 border-bottom: 29px solid #a0e8a1;
 border-left: 29px solid #eee;
 border-right: 29px solid #eee;
 width: 42px;
 height: 0;
}
#octagon:after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 border-top: 29px solid #a0e8a1;
 border-left: 29px solid #eee;
 border-right: 29px solid #eee;
 width: 42px;
 height: 0;
}
</style>

<div id="octagon"></div>
Demo:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Polygons with CSS

Last accessed pages

  1. Adding data from HTML Table Rows in Form fields (2307)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47991)
  3. Sweet Home Decoration (49)
  4. Barbie Games (654)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (35690)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47991)
  2. Read Excel file data in PHP - PhpExcelReader (36111)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35690)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32182)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29461)