是否阻止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

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内绘制一个六边形可能会更容易。

让某物成为正在消失的某物的孩子。但是你想让它出现，这没有太大的意义。

相反，将你想要显示的东西放在正在消失的东西之外……这样它就不会消失/被裁剪。

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

Answer 3

问题是您将一个矩形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>

​