阻止剪辑子的CSS剪辑路径？

Question

有没有办法阻止剪辑路径剪切它的孩子？例如,请考虑以下代码:

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

Answer 2

本质上是什么

尼克A说：

剪辑路径本质上会切掉 div 的部分内容，因为标题位于 div 内部，它本质上会被剪辑，使用 svg 在 div 内部绘制六边形可能更容易

让某些东西成为正在消失的东西的子元素......但你希望它出现，没有太大意义。

相反，将您想要显示的内容放在正在消失的内容之外......这样它就不会消失/被剪辑。

这就像拉姆·维诺斯所说的那样。