包含来自 div 的元素的剪辑路径

Question

我不知道如何使这一行中滑块的底部可见，我在其中使用剪辑路径制作顶部和底部成角度的背景。我尝试将 z-index、overflow 和 position:relative 与所有元素结合使用，但没有任何帮助：

http://sport.fusionidea.com/test-page/

Answer 1

正如我在上面评论的那样，这是一种不使用 clip-path 创建背景的替代方法，它也得到了更好的支持并且更易于管理：

.slide {
  --s: 40px; /* Change this to control the angle*/

   height: 300px;
   background:
    linear-gradient(to top left ,purple 50%,#0000 51%) top,
    linear-gradient(purple 0 0) center,
    linear-gradient(to bottom right ,purple 50%,#0000 51%) bottom;
   background-size: 100% var(--s),100% calc(100% - 2*var(--s)); 
   background-repeat: no-repeat;
}

<div class="slide">
</div>

Answer 2

您可以使用伪元素来创建此效果。

给父级 div 一个宽度和 position: relative 然后创建一个伪元素 position: absolute, width:100% 和 height: 100% 位于它后面（使用z-index)。这将使您能够创造出 "container" div 的效果，允许子元素逃脱其边界。

与线性渐变方法相比，此方法的优势在于您可以在倾斜形状上使用背景图像、实际线性渐变等——您不限于单一颜色。

https://jsfiddle.net/9swLf86p/1/

包含来自 div 的元素的剪辑路径

Clip-path with an element that comes out of div

css

clip-path