如何防止CSS clip-path剪裁子元素？

Question

有没有办法防止clip-path修剪其子元素？例如，考虑以下代码：

.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

---

剪切路径本质上是将 div 的部分内容“剪掉”。由于标题在 div 内部，它会被自然地剪切。使用 SVG 在 div 内绘制一个六边形可能会更容易些。 - Nick stands with Ukraine

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>

- Temani Afif

Answer 2

问题在于您将一个矩形div剪裁成了六边形，这样会隐藏子元素。尝试使用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

Answer 3

基本上，

Nick A说：

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

让某些东西成为消失的东西的子项...但你希望它出现，这没有太多意义。

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

这就像ram vinoth所说的那样。

- Liam Pillay

---

我觉得如果人们能做到那样，他们会的，但事情从来都不是那么简单。 - undefined