CSS: hexagon with text on div with background-image

Question

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 1

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 suited to a fully dynamic content, as is more and more frequent