圖像周圍的兩個六邊形邊框（響應式）

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

圖像周圍的兩個六邊形邊框（響應式）

回答

相關問題