html - 防止 CSS clip-path 剪裁 child ？

Question

有什么方法可以防止 clip-path 剪掉它的 child 吗？例如，考虑以下代码:

.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

考虑伪元素:

.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>