Polygons with CSS

Css Course

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

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:

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:

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:

<input type="checkbox" name="a_name" value="value" checked="checked" />

#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}

var rest8_7 = 8 % 7;
alert(rest8_7);

$nr = ceil(3.5);
echo $nr;        // 4