防止CSS剪切路径剪切子级吗？ [英] Prevent CSS clip-path from clipping children?

问题描述

有什么方法可以防止剪切路径剪切其子级吗？例如，考虑以下代码：

Is there any way to prevent clip-path from clipping its children? For example, consider the following code:

.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

推荐答案

基本上是什么

尼克A 说：

剪切路径本质上会切掉div的一部分，因为
标头位于div内，因此会被固有地剪切，因此绘制六角形可能更容易
在div内使用svg代替

The clip path essentially chops off parts of the div, because the header is inside the div it will inherently be clipped, it may be easier to draw a hexagon inside the div using svg instead

某些东西正在消失中……但是您想让它出现，

Having something be the child of something that is disappearing... but you want that to appear, doesn't make too much sense.

相反，将您要显示的东西放在正在消失的东西之外...这样，它就不会消失/得到

Instead, place the thing you want to be shown outside the thing that is disappearing... that way it doesn't disappear/get clipped.

这就像ram vinoth所说。

This is like ram vinoth said.

这篇关于防止CSS剪切路径剪切子级吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！