• 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 tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Polygons with CSS

Last accessed pages

  1. Add and Remove HTML elements and Content with jQuery (17347)
  2. CSS cursor property - Custom Cursors (3102)
  3. Remove / Get duplicate array values - Reset array keys in PHP (5853)
  4. Add Tag to Selected Text in textarea with JavaScript (751)
  5. Add, Change, and Remove Attributes with jQuery (22007)

Top accessed pages

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