CSS六角形與內部元素

我有一個由CSS創建的六角形。我試圖在六角形內獲得一個頁眉，段落和按鈕，但所有這些元素都隱藏在六邊形格式化之前和之後。這裏是代碼的鏈接：https://jsfiddle.net/o8a3pm3h/6/。任何有關如何將元素放置在六角形表面的建議，我們感激不盡。CSS六角形與內部元素

#hex3 { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#color3 { 
 
    background-color: #CED7DC; 
 
} 
 
.hexagon-wrapper { 
 
    text-align: center; 
 
    margin: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.hexagon { 
 
    height: 100%; 
 
    width: calc(100% * 0.57735); 
 
    display: inline-block; 
 
    z-index: 1; 
 
} 
 
.hexagon:before { 
 
    position: absolute; 
 
    top: 0; 
 
    right: calc((100%/2) - ((100% * 0.57735)/2)); 
 
    background-color: inherit; 
 
    height: inherit; 
 
    width: inherit; 
 
    content: ''; 
 
    transform: rotateZ(60deg); 
 
} 
 
.hexagon:after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: calc((100%/2) - ((100% * 0.57735)/2)); 
 
    background-color: inherit; 
 
    height: inherit; 
 
    width: inherit; 
 
    content: ''; 
 
    transform: rotateZ(-60deg); 
 
}

<!--Please maintain the styling here because its on top of an image--> 
 
<div id="hex3" class="hexagon-wrapper" style="position:absolute; top:80px; right:400px;"> 
 
    <div id="color3" class="hexagon"> 
 
    <h4>TEST</h4> 
 
    <p>TESTTTTTTTTTT</p> 
 
    <button type="button" class="btn btn-secondary" id="grid-row-btn-2" onclick="location.href='/#/'"> 
 
     DISCOVER MORE &nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 
 
    </button> 
 
    </div> 
 
</div>

**另外，我知道，行內CSS是不好的做法，但它只是這個演示。

來源

2016-07-14 sam_smith

https://jsfiddle.net/o8a3pm3h/7/'.hexagon：之前，.hexagon：{ 的z-index：-1;}'後工作正常，太;） –

只是包裝的內容設置在div，放置它，並給它一個z-index：

.content { 
    position: relative; 
    z-index: 5; 
}

JSFiddle Demo

來源

2016-07-14 20:04:52

完善和簡單。我是一個CSS新手;將在一段時間後接受。謝謝 –

@sam_smith很高興我可以幫助:) –

你還需要將文本位置和設置的z-index，使文本高於其它元素：

.hexagon h4, .hexagon p, .hexagon button { 
    position: relative; 
    z-index: 1 
}

例

#hex3 { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#color3 { 
 
    background-color: #CED7DC; 
 
} 
 
.hexagon-wrapper { 
 
    text-align: center; 
 
    margin: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.hexagon { 
 
    height: 100%; 
 
    width: calc(100% * 0.57735); 
 
    display: inline-block; 
 
    z-index: 1; 
 
} 
 
.hexagon:before { 
 
    position: absolute; 
 
    top: 0; 
 
    right: calc((100%/2) - ((100% * 0.57735)/2)); 
 
    background-color: inherit; 
 
    height: inherit; 
 
    width: inherit; 
 
    content: ''; 
 
    transform: rotateZ(60deg); 
 
} 
 
.hexagon:after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: calc((100%/2) - ((100% * 0.57735)/2)); 
 
    background-color: inherit; 
 
    height: inherit; 
 
    width: inherit; 
 
    content: ''; 
 
    transform: rotateZ(-60deg); 
 
} 
 
.hexagon h4, 
 
.hexagon p, 
 
.hexagon button { 
 
    position: relative; 
 
    z-index: 1 
 
}

<!--Please maintain the styling here because its on top of an image--> 
 
<div id="hex3" class="hexagon-wrapper" style="position:absolute; top:80px; right:400px;"> 
 
    <div id="color3" class="hexagon"> 
 
    <h4>TEST</h4> 
 
    <p>TESTTTTTTTTTT</p> 
 
    <button type="button" class="btn btn-secondary" id="grid-row-btn-2" onclick="location.href='/#/'"> 
 
     DISCOVER MORE &nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 
 
    </button> 
 
    </div> 
 
</div>

來源

2016-07-14 20:05:21 j08691

CSS六角形與內部元素

回答

相關問題