图像周围的两个六边形边框（响应式）

Iam试图围绕图像制作双六边形边框。这里是我的小提琴，它没有来远：图像周围的两个六边形边框（响应式）

代码：

<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。第二个问题是我想让它响应。希望任何人都能帮助我实现这一点。

来源

2017-08-02 mheonyae

我找到了一个很好的部分解决方案在这里https://stackoverflow.com/questions/34240589/hexagon-with-border-and-image/34263694#34263694但我需要添加另一个六角形边框当前 – mheonyae

clip-path的CSS属性应该能够为您提供本机寻找的功能，特别是多边形选项。您可以定义剪裁的自定义形状，包括六边形，并提供高级别的自定义。这里有这样的链接获取更多信息：css-tricks clip-path

来源

2017-08-02 19:58:18

是的，但问题在于响应性 – mheonyae

您必须更加具体地说明您的响应性意味着什么。 –

我打算将六边形放在div中，该宽度将是页面宽度的25％。我需要六边形的尺度作为页面大小缩放在不同的屏幕尺寸或窗口大小 – mheonyae

图像周围的两个六边形边框（响应式）

回答

相关问题