画像の周りに2つの六角形の枠があります（反応する）

Question

私の画像の周りに二重の六角形の枠を作ろうとしています。ここまでのところ来るdidntの私のバイオリンは、次のとおりです。

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の青と黒の境界線が欲しい。そして2番目の問題は、私がそれを反応的にしたいということです。誰でも私がこれを達成するのを助けることを願っています

Answer 1

clip-pathのCSSプロパティは、あなたがネイティブに探している機能、特にポリゴンオプションを提供できるはずです。 クリッピング用のカスタムシェイプ（六角形を含む）を定義でき、高度なカスタマイズが可能です。 は、ここでは、この詳細はリンクです：css-tricks clip-path