Question

有没有办法阻止剪辑路径剪切其子节点？例如，请考虑以下代码：

＆＃13;

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

＆＃13;

<div class="el">
  <h1>Work Hard, Play Hard</h1>
</div>

＆＃13;

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内绘制六边形

让某事物成为正在消失的事物的子代...但是您希望它出现，这没有太大意义。

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

这就像ram vinoth所说的。

Answer 3

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

private func linePath()-> CGPath {
        let viewCenter = CGPoint(x: bounds.midX, y: bounds.midY)
        
        let radius = bounds.midX/7.5
        
        let miniRadius = bounds.midX/15
        
        
        
        let path = UIBezierPath()
        ///path.move(to: viewCenter)
        path.addArc(withCenter: viewCenter, radius: miniRadius, startAngle: 0, endAngle: 180.degreesToRadians, clockwise: true)
        
        
        path.addQuadCurve(to: CGPoint(x: path.currentPoint.x - 5, y: path.currentPoint.y - 30), controlPoint: CGPoint(x: path.currentPoint.x - 10, y: path.currentPoint.y - 30))
        
       // path.addLine(to: CGPoint(x: path.currentPoint.x - 5, y: path.currentPoint.y - 30))
        
        path.addArc(withCenter: CGPoint(x: path.currentPoint.x + radius, y: path.currentPoint.y + radius/2), radius: radius, startAngle: 180, endAngle: 0.degreesToRadians, clockwise: true)
        
        path.close()
        return path.cgPath
    }

Answer 4

为什么不让h1标签保持在div标签之外以使其可见

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
.el {
  width: 300px;
  height: 300px;
  
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color: orangered;
  position: absolute;
  z-index: 1;
  
}

h1 {
  position: fixed;
  z-index: 999;
  
}
</style>
</head>
<body>
 <div class="el">
  
</div>
<h1>Work Hard, Play Hard</h1>
</body>

<script>
</script>
</html>

＆＃13;

阻止剪辑子的CSS剪辑路径？

4 个答案: