六角形與邊框和圖像

Question

我有以下六角形代碼。 我需要六邊形周圍的邊框和圖像作為六邊形的背景而不是普通的顏色。

 body { background: #ecf0f1; } #hex1 { width: 200px; height: 200px; } #color1 { background-color: #D93; } .hexagon-wrapper { text-align: center; margin: 20px; position: relative; display: inline-block; } .hexagon { height: 100%; width: 57.735%; display: inline-block; } .hexagon:before { position: absolute; top: 0; right: 21.1325%; background-color: inherit; height: inherit; width: inherit; content: ''; transform: rotate(60deg); } .hexagon:after { position: absolute; top: 0; right: 21.1325%; background-color: inherit; height: inherit; width: inherit; content: ''; transform: rotate(-60deg); } 

 <div id="hex1" class="hexagon-wrapper"> <span id="color1" class="hexagon"></span> </div> 

這是代碼的鏈接

Answer 1

我建議改變你的做法。 內聯SVG將是實現這一目標的最靈活方式。 並且它並不復雜，特別是對於像六邊形這樣的簡單形狀。

下面是使用polygon元素的示例，圖像使用pattern元素填充多邊形，並使用CSS（ stroke和stroke-width屬性）添加邊框：

 svg{ width:30%; margin:0 auto; } #hex{ stroke-width:2; stroke: teal; } 

 <svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" /> </pattern> </defs> <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/> </svg> 

Answer 2

一種尚未涉及的方法是使用CSS clip-path屬性，這與web-tiki提供的SVG解決方案非常相似 - 但不完全相同。

這里我們使用剪輯路徑來塑造外部元素和內部元素，使用外部元素上的background-color來模擬邊框並在內部元素上設置margin以控制border-width ：

 html, body { height: 100%; background-color: black; } div.hexagon-wrapper { display: inline-block; -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%); clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%); background-color: limegreen; } .hexagon-wrapper .hexagon { display: block; -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%); clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%); margin: 3px; } 

 <div class="hexagon-wrapper"> <img class="hexagon" src="http://lorempixel.com/150/150/people/1" /> </div> 

JS小提琴演示 。

參考文獻：

• clip-path （MDN） 。
• clip-path （W3C） 。

Answer 3

我已經編輯了CSS以在其上添加邊框。 http://codepen.io/anon/pen/MKaJJZ為了添加背景圖像：制作圖像的切片並將其添加為每個矩形的背景（在CSS中創建的3個矩形）以便在連接3個切片后它變為單個圖像

<div id="hex1" class="hexagon-wrapper">
    <span id="color1" class="hexagon"></span>
</div>
body { background: #ecf0f1; }
#hex1 { width: 200px; height: 200px; }
#color1 { background-color: #D93; }
.hexagon-wrapper { text-align: center; margin: 20px; position: relative; display: inline-block; }
.hexagon { height: 100%; width: 60%; display: inline-block; border-top:5px solid red; border-bottom:4px solid red; }
.hexagon:before { position: absolute; top: 0; right: 20%; background-color: inherit; height: inherit; width: inherit; content: ''; transform: rotate(60deg); border-top:5px solid red; border-bottom:5px solid red; }
.hexagon:after { position: absolute; top: 0; right: 20.1%; background-color: inherit; height: inherit; width: inherit; content: ''; transform: rotate(-60deg); border-top:5px solid red; border-bottom:5px solid red;  }