How do I create a cut-out hexagon shape?

Question

How can I create a cut-out hexagon shape using CSS?

By cut-out hexagon shape I mean something like this:

I was able to create a hexagon with a background image, but I need it to be like in the image.

.hexagon {    position: relative;    width: 300px;    height: 173.21px;    margin: 86.60px 0;    background-image: url('https://placeimg.com/300/400/any');    background-size: auto 346.4102px;    background-position: center;  }    .hexTop,  .hexBottom {    position: absolute;    z-index: 1;    width: 212.13px;    height: 212.13px;    overflow: hidden;    -webkit-transform: scaleY(0.5774) rotate(-45deg);    -ms-transform: scaleY(0.5774) rotate(-45deg);    transform: scaleY(0.5774) rotate(-45deg);    background: inherit;    left: 43.93px;  }    /* Counter transform the background image on the caps */  .hexTop:after,  .hexBottom:after {    content: "";    position: absolute;    width: 300.0000px;    height: 173.20508075688775px;    -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-86.6025px);    -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-86.6025px);    transform:          rotate(45deg) scaleY(1.7321) translateY(-86.6025px);    -webkit-transform-origin: 0 0;    -ms-transform-origin: 0 0;    transform-origin: 0 0;    background: inherit;  }    .hexTop {    top: -106.0660px;  }    .hexTop:after {    background-position: center top;  }    .hexBottom {    bottom: -106.0660px;  }    .hexBottom:after {    background-position: center bottom;  }    .hexagon:after {    content: "";    position: absolute;    top: 0.0000px;    left: 0;    width: 300.0000px;    height: 173.2051px;    z-index: 2;    background: inherit;  }

<div class="hexagon">    <div class="hexTop"></div>    <div class="hexBottom"></div>  </div>

Answer 1

For this transparent cut-out hexagon, I would suggest using an inline SVG with the path element:

svg{    display: block;    width: 70%;    height: auto;    margin: 0 auto;  }    path{    transition: fill .5s;    fill: #E3DFD2;  }  path:hover{    fill: pink;  }  body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-position:center;background-size:cover;}

<svg viewbox="-10 -2 30 14">    <path d=" M-10 -2 H30 V14 H-10z M2.5 0.66 L0 5 2.5 9.33 7.5 9.33 10 5 7.5 0.66z" />  </svg>

Hexagon mask point calculations:

The hexagon coordiantes are pretty easy to calculate. For a regular hexagon in the above orientation:

width = height / sin(60deg) sin(60deg) ~=0.866 

If width is 10 (like in the above example) the coordinates are:

You can find these coordinate in the d attribute after the second M.

Why use SVG?

The main advantages of using SVG in this case are:

• Maintainability (example: imagine you need to change the color of the mask. In SVG it is clear what you need to change and there is only one attribute to change.)
• Shorter code
• You can easily use an image or gradient to fill the mask
• Maintain the boundaries of the shape and trigger mouse envents only over the fill respecting the mask (hover the transparent hexagon in the example).

---

Original example with the mask element:

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-position:center;background-size:cover;}    svg{    display: block;    width: 70%;    height: auto;    margin: 0 auto;  }

<svg viewbox="-10 -2 30 14" >    <defs>      <mask id="mask" x="0" y="0" width="10" height="10">        <rect x="-10" y="-2" width="40" height="16" fill="#fff"/>        <polygon points="2.5 0.66 7.5 0.66 10 5 7.5 9.33 2.5 9.33 0 5" />      </mask>    </defs>    <rect x="-10" y="-5" width="30" height="20" mask="url(#mask)" fill="#E3DFD2"/>  </svg>