Prevent CSS clip-path from clipping children? - html

Question

Is there any way to prevent clip-path from clipping its children? For example, consider the following code:
.el {
width: 300px;
height: 300px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: orangered;
}
h1 {
position: relative;
z-index: 100;
}
<div class="el">
<h1>Work Hard, Play Hard</h1>
</div>
Codepen

Answer 1

Consider pseudo element:
.el {
width: 300px;
height: 300px;
position:relative;
z-index:0;
}
.el::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: orangered;
}
<div class="el">
<h1>Work Hard, Play Hard</h1>
</div>

Answer 2

Essentially what
Nick A said:
The clip path essentially chops off parts of the div, because the
header is inside the div it will inherently be clipped, it may be
easier to draw a hexagon inside the div using svg instead
Having something be the child of something that is disappearing... but you want that to appear, doesn't make too much sense.
Instead, place the thing you want to be shown outside the thing that is disappearing... that way it doesn't disappear/get clipped.
This is like ram vinoth said.

Answer 3

The problem is that you clipped a rectangular div into an hexagon, which hid the child elements. Try using SVG:
<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="orangered" transform="translate(10)"></polygon>
<text x="160" y="160"
font-size="30"
text-anchor="middle"
>
Any Text Here
</text>
</svg>