JimJim2000 JimJim2000 - 7 months ago 45
HTML Question

CSS: hexagon with text on div with background-image

I have the following HTML and CSS code:



.hex {
width: 150px;
height: 86px;
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto 173px;
position: relative;
float: left;
margin: 25px 5px;
text-align: center;
zoom: 1;
}
.hex a {
display: block;
width: 100%;
height: 100%;
text-indent: -9999em;
position: absolute;
top: 0;
left: 0;
}
.hex .corner-1,
.hex .corner-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
z-index: -2;
overflow: hidden;
backface-visibility: hidden;
}
.hex .corner-1 {
z-index: -1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before,
.hex .corner-2:before {
width: 173px;
height: 173px;
content: '';
position: absolute;
background: inherit;
top: 0;
left: 0;
z-index: 1;
background: inherit;
background-repeat: no-repeat;
backface-visibility: hidden;
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom: 0;
}
/* Custom styles*/

.hex .inner {
color: #eee;
}
.hex h4 {
font-family: 'Josefin Sans', sans-serif;
margin: 0;
}
.hex hr {
border: 0;
border-top: 1px solid #eee;
width: 60%;
margin: 15px auto;
}
.hex p {
font-size: 16px;
font-family: 'Kotta One', serif;
width: 80%;
margin: 0 auto;
}
.hex.hex-3 {
background: #80b971;
}

<div class="divWithBackgrounImage">
<div class="hex hex-3">
<div class="inner">
<h4>CONTACT US</h4>
<hr />
<p>We Open Everyday</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</div>





The problem is that z-index with negative values are hidden behind the background image. If I use positive z-index than I have no text in my hexagon. How to solve this problem?

Answer

A more versatile solution than CSS shape hacks is to use SVG. For example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#fa5" stroke="blue" stroke-width="5" transform="translate(10)"></polygon>
    <text x="160" y="160" 
        font-family="Verdana" 
        font-size="30"
        text-anchor="middle"
    >
    Any Text Here
    </text>  
</svg>

There are many possibilities:

  • have a static SVG, either served as an image or inline (as in this snippet)
  • use the SVG as background of a div with text, or make the SVG contain the text (as in the snippet)
  • use JavaScript to dynamically set the text (or other attributes, like colors or size) in the image
  • fully generate the SVG with JavaScript (that's my usual practice, I even have a micro library for that: hu.js), this solution is adapted to a fully dynamic content, as is more and more frequent