html - 图像周围有两个六边形边框(响应式)

我试图在我的图像周围制作一个双六角形边框。这是我的提琴，没有走远：

https://jsfiddle.net/qeh8wdsd/

码：

    <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;
}

因此，我希望图像位于红色六边形所在的位置，基本上，图像应位于内部并“修剪”成六边形，然后我要在其周围形成蓝色和黑色边框，每个边框约2px。第二个问题是我想让它响应。希望任何人都能帮助我实现这一目标。

最佳答案

clip-path的CSS属性应该能够为您提供本机正在寻找的功能，尤其是多边形选项。
您可以定义用于裁剪的自定义形状（包括六边形），并提供高级别的自定义。
这是有关更多信息的链接：css-tricks clip-path

关于html - 图像周围有两个六边形边框(响应式)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45469766/