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

Posted 2023-03-05

【中文标题】防止 CSS 剪辑路径剪辑儿童？

【英文标题】：Prevent CSS clip-path from clipping children?

【发布时间】：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内绘制六边形可能更容易

【参考方案1】：

本质上是什么

尼克A说：

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

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

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

这就像 ram vinoth 说的。

【参考方案2】：

问题是您将一个矩形 div 裁剪成一个六边形，从而隐藏了子元素。尝试使用 SVG：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"   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>