Prevent CSS clip-path from clipping children?
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
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>