How do I create a cut-out hexagon shape? - html

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>

Answer 2

This type of shape can be achieved by filling the outer part of the hexagon using elements. Different transform:rotate(xdeg) should be applied to each element to achieve this effect.
Here is a snippet creating this effect.
Note: The below snippet is supposed to be responsive, so if it appears broken, see the one below it.
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
background: url('https://placeimg.com/800/600/any');
background-size: cover;
background-attachment: fixed;
}
.container {
width: 50%;
height: 50%;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 10px solid #009688;
}
.cut:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 100%;
transform: rotate(-60deg);
top: 0;
}
.cut:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 0%;
transform: rotate(60deg);
top: 0;
}
.container:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 0%;
transform: rotate(-60deg);
top: 0;
}
.container:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 100%;
transform: rotate(60deg);
top: 0;
}
<div class="container">
<div class="cut"></div>
</div>
With fixed height and width (better viewed in full screen):
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
background: url('https://placeimg.com/800/600/any');
background-size: cover;
background-attachment: fixed;
}
.container {
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 10px solid #009688;
}
.cut:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 100%;
transform: rotate(-60deg);
top: 0;
}
.cut:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 0%;
transform: rotate(60deg);
top: 0;
}
.container:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 0%;
transform: rotate(-60deg);
top: 0;
}
.container:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 100%;
transform: rotate(60deg);
top: 0;
}
<div class="container">
<div class="cut"></div>
</div>
This is how the cut-out hexagon works:

Answer 3

SVG is the best tool for such things and the biggest contributing factor towards that is that it is easier to create and maintain such shapes as SVG.
But these can be done with CSS transform in another way with simpler transforms also. All we need to do is make use of skew transform and set skew angle based on the shape that is required.
For hexagons, the angle between each side is 120 degrees and so the elements have to be skewed by +/- 30 degrees. For pentagons, the angle between each side is 108 degrees and so skew angles on the bottom half would be +/- 18 degrees but the top half would have +/- 36 degrees. For diamond, the angle between each side is 90 degrees and so the skew angles would be +/-45 degrees.
A few positive points of this approach are: (not that SVG doesn't have these)
The shapes created using this approach are responsive (try hovering on the shapes in demo)
Transforms are pretty well supported given that IE8 is on the way out (Microsoft themselves are stopping support for IE8 from Jan '16). This is not bad when compared with SVG because SVG has the same browser support.
There are quite a few drawbacks of using CSS though:
Extra elements are required in-order to produce the shape.
These would work only in IE9+ (that is, browsers that support transforms). The drawback is not in comparison with SVG but in general.
Fill for the area other than the cut-out cannot be a gradient or an image. It can only be solid color.
Hover effects can be added (as shown in the demo) but it will triggered when the mouse is over the cut-out area also because it is still a part of the container even though it is transparent.
.shape {
position: relative;
height: 100px;
border: 20px solid palevioletred;
overflow: hidden;
}
.shape.hexagon {
width: calc(100px + (100px * 0.577)); /* width = height + (height * tan 30) for hexagon */
}
.shape.pentagon {
width: calc(100px * 1.051); /* width = height * 1.618/1.539 for pentagon (Source: Wiki - https://en.wikipedia.org/wiki/Pentagon */
}
.shape.diamond {
width: 100px; /* height = width for diamond */
}
.hexagon .inner, .pentagon .inner, .diamond .inner {
position: absolute;
height: 100%;
width: 50%;
top: 0px;
left: 85%;
}
.diamond .inner {
left: 100%;
}
.shape:after, .shape:before {
position: absolute;
content: '';
height: 50%;
width: 50%;
left: -35%;
background: palevioletred;
}
.shape.diamond:before, .shape.diamond:after {
left: -50%;
}
.hexagon .inner:after, .hexagon .inner:before, .pentagon .inner:after,
.pentagon .inner:before, .diamond .inner:after, .diamond .inner:before {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: 0px;
background: palevioletred;
}
.shape.hexagon:before, .hexagon .inner:after {
transform: skew(-30deg);
}
.shape.hexagon:after, .hexagon .inner:before {
transform: skew(30deg);
}
.shape.pentagon:before {
transform: skew(-36deg);
}
.shape.pentagon:after{
transform: skew(18deg);
}
.shape.diamond:before, .diamond .inner:after {
transform: skew(-45deg);
}
.shape.diamond:after, .diamond .inner:before {
transform: skew(45deg);
}
.pentagon .inner:before {
transform: skew(36deg);
}
.pentagon .inner:after {
transform: skew(-18deg);
}
.shape:before, .inner:before {
top: 0px;
transform-origin: right bottom;
}
.shape:after, .inner:after {
bottom: 0px;
transform-origin: right top;
}
/* just for demonstrating responsiveness */
.shape {
float: left;
margin: 10px;
transition: all 1s linear;
}
.shape:hover{ height: 150px; }
.shape.hexagon:hover { width: calc(150px + (150px * 0.577)); }
.shape.pentagon:hover { width: calc(150px * 1.051); }
.shape.diamond:hover { width: 150px; }
body {
background: url(http://lorempixel.com/500/500/nature/6) fixed;
background-size: cover;
}
<div class='shape hexagon'>
<div class='inner'></div>
</div>
<div class='shape pentagon'>
<div class='inner'></div>
</div>
<div class='shape diamond'>
<div class='inner'></div>
</div>

Answer 4

The SVG approach is obviously good! But I tried getting it done via CSS! Somehow I managed to get it till here...
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
body {
background: url('http://lorempicsum.com/up/627/300/4') no-repeat top left;
background-size: cover;
padding-top: 10%;
}
.parent {
margin: 0 auto;
display: table;
width: 400px;
height: 230px;
text-align: center;
table-layout: fixed;
}
.orange {
display: table-cell;
vertical-align: middle;
background: transparent;
width: 100%;
height: 230px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-left: 137px solid orange;
border-right: 137px solid orange;
}
.one,
.two {
position: relative;
width: 126px;
height: auto;
display: block;
border-left: 28px solid orange;
border-right: 28px solid orange;
margin: 0 auto;
}
.one {
border-top: 60px solid transparent;
border-bottom: 60px solid orange;
}
.two {
border-top: 60px solid orange;
border-bottom: 60px solid transparent;
}
<div class="parent">
<div class="orange">
<div class="two"></div>
<div class="one"></div>
</div>
</div>

Answer 5

This answer illustrates the costs of using only one element
SVG is the tool for this. Any CSS alternative will probably be very hacky and quirky, so I say the best is to use SVG.
Using CSS
Properties used are:
box-shadows (for color around transparent region)
perspective transforms, rotation
overflow hidden
pseudoelement
body {
background:url('http://i.imgur.com/TYP4Xka.jpg');
}
#box {
height: 400px;
width: 400px;
position: relative;
box-shadow: inset 70px 0 0 #444, inset -70px 0 0 #444, inset 0 0 0 50px #444;
overflow: hidden;
}
#box:before {
content: "";
position: absolute;
height: 150px;
width: 259.8px; /* w = h * sqrt(3) bcoz w = 2*h*cos(30deg) */
top: 125px; /* (parentHeight - pseudoHeight)/2 */
left: 70.1px; /* (parentWidth - pseudoWidth)/2 */
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}
#box:after {
content: "";
position: absolute;
height: 150px;
width: 259.8px;
top: 125px;
left: 70.1px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg);
box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}
<div id="box"></div>
NOTE
You can also kind off morph the shape around in an animation, but be warned. Do not use a lot of box-shadows for anything, especially for animation. Box- shadow has a very high CPU usage.