Hexagon Shape With Css3

Hexagon shape with CSS3

A simple search turned this up: CSS Hexagon Tutorial

Referenced from the site:

Put a 104px × 60px div with a background colour between them and you get (the hexagon):

width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

width: 104px;
height: 60px;
background-color: #6C6;

width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

Making a hexagon with a mask and border in css3

I would consider my previous answer where I will duplicate the shape to create the border:

.hex {
  position:relative;
  --s:200px;
  width: 200px;
  height:calc(0.866*var(--s));
}

.hex div {
  filter: url('#goo');
  position:absolute;
  inset:0;
}

.hex div::before{
  content: "";
  position:absolute;
  inset:0;
  background:#000;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hex div:nth-child(2)::before{
  background:red;
  inset:4px;
}

<div class="hex">
  <div></div>
  <div></div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Hexagon shape using CSS3 or Bootstrap

Here's a possible solution.

Instead of the current green background that you're setting to the hexagon, try a radial-gradient.

background: radial-gradient(circle, transparent 0%, #6B8E23 60%);

Edit: This is the solution to the anchor tag, I used flex so the tag will use the entire w & h of the container and center the text.

HTML:

<div class="text">
    <a href="mycustomersite1.abc.com">My overall score</a>
</div>

CSS:

.text {
    position: absolute;
    z-index: 10;
    width: 100%;
    text-align: center;
    height: 100%;
}
.text a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Hope this helps.

How to make a curved edge hexagon by using CSS

I think you are looking for this.

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
}

.hex:before,
.hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.hex:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hex:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

<div class="hex"></div>

How To Arrange CSS3 Hexagons in 2-3-2 tree order

If you want to modify that code ( to have a responsive hex grid ) look the changes (where I changed something, I wrote 'modified'). Anyway I think it's better to write the code from scratch sometimes.

* {    margin: 0;    padding: 0;}body{ background:#F9F9F9;}#hexGrid {    overflow: hidden;    width: 60%;    margin: 0 auto;    font-family: 'Raleway', sans-serif;    font-size: 15px; background-color:rgba(0,0,0,0.1);    /*modified*/ padding-bottom:5.3%;                            /*modified*/}#hexGrid:after {    content: "";    display: block;    clear: both;}.hex {    position: relative;    list-style-type: none;    float: left;    overflow: hidden;    visibility: hidden;    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);            transform: rotate(-60deg) skewY(30deg) translatez(-1px);}.hex * {    position: absolute;    visibility: visible;    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */}.hexIn {    display:block;    width: 100%;    height: 100%;    text-align: center;    color: #fff;    overflow: hidden;    -webkit-transform: skewY(-30deg) rotate(60deg);        -ms-transform: skewY(-30deg) rotate(60deg);            transform: skewY(-30deg) rotate(60deg);}
/*** HEX CONTENT **********************************************************************/.hex div {    left: -100%;    right: -100%;    width: auto;    height: 100%;    margin: 0 auto;}
.hex h1, .hex p {    width: 102%;    left:-1%; /* prevent line on the right where background doesn't cover image */    padding: 5%;    box-sizing:border-box;    background-color: rgba(0, 128, 128, 0.8);    font-weight: 300;    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;            transition:          transform .2s ease-out, opacity .3s ease-out;}.hex h1 {    bottom: 50%;    padding-top:50%;    font-size: 1.5em;    z-index: 1;    -webkit-transform:translateY(-100%) translatez(-1px);        -ms-transform:translateY(-100%) translatez(-1px);            transform:translateY(-100%) translatez(-1px);}.hex h1:after {    content: '';    position: absolute;    bottom: 0;    left: 45%;    width: 10%;    text-align: center;    border-bottom: 1px solid #fff;}.hex p {    top: 50%;    padding-bottom:50%;    -webkit-transform:translateY(100%) translatez(-1px);        -ms-transform:translateY(100%) translatez(-1px);            transform:translateY(100%) translatez(-1px);}

/*** HOVER EFFECT  **********************************************************************/.hexIn:hover h1, .hexIn:focus h1,.hexIn:hover p, .hexIn:focus p{    -webkit-transform:translateY(0%) translatez(-1px);        -ms-transform:translateY(0%) translatez(-1px);            transform:translateY(0%) translatez(-1px);}
/*** SPACING AND SIZING **************************************/        /*modified*/
    .hex {        width: 32.3333333333%; /* = (100-3) / 3    or use 'calc()' */        padding-bottom: 37.3353174076%; /* =  width / sin(60deg) */  margin-bottom: -8.4%;    }    .hex:nth-child(5n+1),    .hex:nth-child(5n+2),    .hex:nth-child(5n+3) {        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);                transform: translateX(50%) rotate(-60deg) skewY(30deg);    }
    .hex:nth-child(5n+3),    .hex:nth-child(5n+4),    .hex:nth-child(5n+5) {        -webkit-transform: translateX(0%) rotate(-60deg) skewY(30deg);            -ms-transform: translateX(0%) rotate(-60deg) skewY(30deg);                transform: translateX(0%) rotate(-60deg) skewY(30deg);    }  .hex:nth-child(5n+1){        margin-left: 1%;        margin-right: 1%;    }     .hex:nth-child(5n+4){        margin-left: 1%;        margin-right: 1%;    }      .hex:nth-child(5n+3) {        clear: left;        margin-left: 0.5%;    }}

<!doctype html><html>    <head>        <meta charset="utf-8">        <title></title>        <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" type="text/css" href="hexagons.css">        <link rel="stylesheet" type="text/css" href="http://supersevadeals.16mb.com/rak_code_hex/css/colors.css">        <link rel="stylesheet" type="text/css" href="css/materialize.min.css">        <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>    </head>    <body>
<ul id="hexGrid">            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div><h1>1</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>2</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                   <div class="mono-orange"></div><h1>3</h1>
                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div><h1>4</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>5</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div><h1>6</h1>
                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>7</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>8</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>9</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>10</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>11</h1>                </a>            </li>            <li class="hex">                <a class="hexIn" href="#">                    <div class="mono-orange"></div>
<h1>12</h1>                </a>            </li>

</ul>
    </body></html>

CSS3 Hexagon with dotted border

Html Code:

<div class="hexagon"><span></span></div>

Css code :

  .hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: lightgreen;
  margin: 86.60px 0;
   border-left: 3px dotted #f00;;
  border-right:3px dotted #f00;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 40.9340px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before {
  top: -106.0660px;
  border-top: 3px dotted #f00;
  border-right:3px dotted #f00;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: 3px dotted #f00;
  border-left: 3px dotted #f00;
}

/*cover up extra shadows*/
.hexagon span {
  display: block;
  position: absolute;
  top:1.7320508075688772px;
  left: 0;
  width:294px;
  height:169.7410px;
  z-index: 2;
  background: inherit;
}

output :

Sample Image

Apply color as you nedd.

html/css: how to create a hexagonal image-placeholder

Important Note

Be informed that this solution does not work for those who want to create something similar supported by all browsers as for the time being IE does not support the clip-path-property used in this example!!

I've found a way to do it thanks to @SahilDhir although it's more of a workaround:

HTML

<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>

CSS

.poligon {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 180px;
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.poligon img {
  position: absolute;
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 196px; /* container height - (border thickness * 2) */
  height: 176px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

Note that I did not calculate much here, but rather tried achieving a six-sided figure.

I will have the problem that my picture will have a transparent background, but I thought that I might produce a linear gradient to fill the background polygon. I will have to try that out first though ^^

I will not mark this as the final answer as my questions have not yet been answered truly. I still want to be able to create a hexagon as the one in the example I gave above where I would be able to adapt the heights and widths as well as the border thicknesses the way I want.

EDIT

As I did not find a better solution I have improved the one here and figured out the calculations needed:

HTML

<div class="poligon">
  <div class="hex-background">
    <img src="https://img.clipartfest.com/953d8641fe933437bbc41d48e6fc8492_yellow20stars20clipart-christmas-stars-clipart-without-background_532-506.png">
  </div>
</div>

CSS

.poligon {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 103.92px; /* width * 0.866 */
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex-background {
  position: absolute;
  background-color: white;
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 116px; /* container width - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.poligon img {
  position: absolute;
  width: 116px; /* container width - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

The clip-path part is correct if you want a same-sided hexagon.

Same-sided hexagon in colors

With the picture above you can see how I found those numbers ;) If you have further questions about this, don't hesitate to ask. I'll try to explain it the best I can.

How to recreate 6 hexagon shape background in css?

Have you looked into this website yet? Explains basically step by step how to create hexagons out of a 100x100 div using CSS3.

The idea is that a hexagon basically exists out of 3 HTML divs.
One for the top triangle part, one for the mid square section and one for the bottom triangle part.

.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 104px;
    height: 60px;
    background: #6C6;
}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

You can easily put hexagons next to each other to form a hexagon row.
To tile the hexagons you need to add the following CSS3 to the hexagon div.

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}

For all the even hexagon rows use a margin-left of 53px.

.hex-row.even {
    margin-left: 53px;
}

Hexagon Shape With Css3