• 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/>https://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 =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Polygons with CSS

Last accessed pages

  1. Zodiac Signs JavaScript code (5876)
  2. MySQL Query Builder: Database Pagination (404)
  3. Clear Canvas Context (5487)
  4. querySelector and querySelectorAll (13568)
  5. Get and change IFrame content through a JavaScript script created in another IFrame (9951)

Popular pages this month

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