Prevent CSS clip-path from clipping children?

user_1239093 0
Viewed 5704

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

clip-path css html
3 Answers

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>

user_86203330

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.

user_114042950

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>

user_149006000
Related