Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 518
jonas23 Avatar asked May 24 '17 09:05

jonas23


1 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>
like image 183
Temani Afif Avatar answered Oct 05 '22 09:10

Temani Afif