/* Gradient styling */
.gradient {
    /* Our base */
    width: 200px;
    height: 200px;
    background: -moz-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -o-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -webkit-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7d7e7d 0%), color-stop(1, #0e0e0e 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#7d7e7d 0%, EndColorStr=#0e0e0e 100%)";
    background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    margin: 0 auto;
    margin-top: 50px
    }

.rhombus {
    -moz-transform: skew(-30deg) scaley(0.8666);
    -ms-transform: skew(-30deg) scaley(0.8666);
    -o-transform: skew(-30deg) scaley(0.8666);
    -webkit-transform: skew(-30deg) scaley(0.8666);
    transform: skew(-30deg) scaley(0.8666);
    /* .8666 = cos(30deg) */
    }

.triangle, .octagon {
    background: transparent;
    /* comment to see rectangle */
    overflow: hidden;
    /**/
    margin: 0 auto;
    /* uncomment to see rhombus * outline: solid 1px red; /**/
    width: 8.66em;
    /* height*sqrt(3)/2 */
    height: 10em;
    -moz-transform: rotate(-90deg) skewy(30deg);
    -ms-transform: rotate(-90deg) skewy(30deg);
    -o-transform: rotate(-90deg) skewy(30deg);
    -webkit-transform: rotate(-90deg) skewy(30deg);
    transform: rotate(-90deg) skewy(30deg)
    }

.triangle:before, .octagon:before, .octagon.border:after {
    display: block;
    /* to be able to apply width/ height/ transform */
    width: inherit;
    height: inherit;
    -moz-transform: skewy(-30deg) rotate(60deg) translate(50%);
    -ms-transform: skewy(-30deg) rotate(60deg) translate(50%);
    -o-transform: skewy(-30deg) rotate(60deg) translate(50%);
    -webkit-transform: skewy(-30deg) rotate(60deg) translate(50%);
    transform: skewy(-30deg) rotate(60deg) translate(50%);
    background: -moz-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -o-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -webkit-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7d7e7d 0%), color-stop(1, #0e0e0e 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#7d7e7d 0%, EndColorStr=#0e0e0e 100%)";
    background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    -webkit-background-size: cover;
    background-size: cover;
    content: ""
    }

.triangle {
    -moz-transform: translatex(-50px) rotate(-90deg) skewy(30deg);
    -ms-transform: translatex(-50px) rotate(-90deg) skewy(30deg);
    -o-transform: translatex(-50px) rotate(-90deg) skewy(30deg);
    -webkit-transform: translatex(-50px) rotate(-90deg) skewy(30deg);
    transform: translatex(-50px) rotate(-90deg) skewy(30deg)
    }

.octagon:before {
    -moz-transform: skewy(-30deg) rotate(60deg) translate(0);
    -ms-transform: skewy(-30deg) rotate(60deg) translate(0);
    -o-transform: skewy(-30deg) rotate(60deg) translate(0);
    -webkit-transform: skewy(-30deg) rotate(60deg) translate(0);
    transform: skewy(-30deg) rotate(60deg) translate(0)
    }

.hexagon {
    position: relative;
    overflow: hidden;
    background: transparent;
    /* add slash at the end of line to see the rhombus *
      outline: solid 1px red;/**/
    width: 10em;
    height: 10em;
    -moz-transform: rotate(-30deg) skewx(30deg) scaley(0.866);
    -ms-transform: rotate(-30deg) skewx(30deg) scaley(0.866);
    -o-transform: rotate(-30deg) skewx(30deg) scaley(0.866);
    -webkit-transform: rotate(-30deg) skewx(30deg) scaley(0.866);
    transform: rotate(-30deg) skewx(30deg) scaley(0.866)
    }

.hexagon:before {
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    -moz-transform: scaley(1.155) skewx(-30deg) rotate(30deg);
    -ms-transform: scaley(1.155) skewx(-30deg) rotate(30deg);
    -o-transform: scaley(1.155) skewx(-30deg) rotate(30deg);
    -webkit-transform: scaley(1.155) skewx(-30deg) rotate(30deg);
    transform: scaley(1.155) skewx(-30deg) rotate(30deg);
    background: -moz-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -o-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -webkit-linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7d7e7d 0%), color-stop(1, #0e0e0e 100%));
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#7d7e7d 0%, EndColorStr=#0e0e0e 100%)";
    background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    content: ""
    }

/* Border styling */
.rectangle.border, .rhombus.border {
    background: teal;
    -moz-box-shadow: inset 0 0 0 10px black;
    -webkit-box-shadow: inset 0 0 0 10px black;
    box-shadow: inset 0 0 0 10px black
    }

.triangleBorder {
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px
    }

.triangleBorder:before, .triangleBorder:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 50%;
    left: 50%
    }

.triangleBorder:before {
    margin-top: -100px;
    margin-left: -100px;
    border-width: 200px 100px 0 100px;
    border-color: black transparent transparent transparent
    }

.triangleBorder:after {
    margin-top: -90px;
    margin-left: -80px;
    border-width: 165px 80px 0 80px;
    border-color: teal transparent transparent transparent
    }

.parrallelogram {
    margin: 0 auto;
    position: relative;
    border-bottom: 100px solid black;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    height: 0;
    width: 100px
    }

.parrallelogram:before {
    content: "";
    position: absolute;
    top: 10px;
    left: -70px;
    border-bottom: 80px solid teal;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    height: 0;
    width: 80px
    }