我有一个由CSS创建的六边形。我试图在六边形内部得到一个标题,段落和按钮,但所有这些元素都隐藏在六边形的格式之前和之后。以下是代码的链接:https://jsfiddle.net/o8a3pm3h/6/。 任何有关如何将元素放置在六边形div表面的建议都值得赞赏。
#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 <span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
**另外,我知道内联CSS是不好的做法,但它仅适用于此演示。
答案 0 :(得分:1)
您还需要定位文本并设置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 <span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
答案 1 :(得分:0)