防止 CSS 剪辑路径剪辑儿童？答案

【问题标题】：Prevent CSS clip-path from clipping children?防止 CSS 剪辑路径剪辑儿童？
【发布时间】：2017-10-24 14:03:21
【问题描述】：

有什么方法可以防止 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

【问题讨论】：

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

标签： html css clip-path

【解决方案1】：

本质上是什么

尼克A说：

剪辑路径基本上切断了部分 div，因为标头在 div 内，它本身会被剪裁，它可能是使用 svg 更容易在 div 内绘制六边形

让某样东西成为某样正在消失的东西的孩子……但你想让它出现，并没有太大意义。

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

这就像 ram vinoth 说的。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

考虑伪元素：

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

【讨论】：