Two hexagon borders around image (responsive) - html

Question

Iam trying to make a double hexagon border around my image. Here is my fiddle, which didnt come far:
https://jsfiddle.net/qeh8wdsd/
code:
<div class="hex">
<div class="hex inner">
<div class="hex inner2">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"/>
</div>
</div>
</div>
.hex {
margin-top: 70px;
width: 208px;
height: 120px;
background: #000;
position: relative;
}
.hex:before, .hex:after {
content:"";
border-left: 104px solid transparent;
border-right: 104px solid transparent;
position: absolute;
}
.hex:before {
top: -59px;
border-bottom: 60px solid #000;
}
.hex:after {
bottom: -59px;
border-top: 60px solid #000;
}
.hex.inner {
background-color:blue;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:1;
}
.hex.inner:before {
border-bottom: 60px solid blue;
}
.hex.inner:after {
border-top: 60px solid blue;
}
.hex.inner2 {
background-color:red;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:2;
}
.hex.inner2:before {
border-bottom: 60px solid red;
}
.hex.inner2:after {
border-top: 60px solid red;
}
so i want the image to be where the red hexagon is, basically the image should be inside and "clipped" to a hexagon and then i want a blue and a black border around it which is about 2px each. And the second issue is that i want to make it responsive. Hope anyone can help me achieve this.

Answer 1

The CSS property of clip-path should be able to provide you with the functionality you are looking for natively, particularly the polygon option.
You can define custom shapes for clipping, including a hexagon, and provides a high level of customization.
Here's a link for more info on this: css-tricks clip-path