17

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

jonas23
  • 213
  • 3
  • 7
  • 3
    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 – Nick is tired May 24 '17 at 09:49

3 Answers3

8

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

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.

Liam Pillay
  • 592
  • 1
  • 4
  • 19
0

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>
SK-the-Learner
  • 523
  • 5
  • 18