带有div的元素的剪辑路径

Question

我无法弄清楚如何在此行中显示滑块的底部部分，其中我使用剪辑路径使背景具有倾斜的顶部和底部。我尝试了z-index，overflow和position：relative与所有元素的组合，但没有任何帮助：

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

Answer 1

正如我在上面评论的那样，在不使用clip-path的情况下创建背景的替代方法也是如此，它也更好地支持并且更易于管理：

.slide {
   height:300px;
   background-color:purple;
   background-image:
   linear-gradient(to top left,transparent 50%,#fff 51%),
   linear-gradient(to bottom right,transparent 50%,#fff 51%);
   background-position:0 0,100% 100%;
   background-size:100% 40px; /* Change the 40px to control the angle*/
   background-repeat:no-repeat;
}

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

Answer 2

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

给父div赋予一个宽度和position: relative，然后使用位于其后的position: absolute，width:100%和height: 100%创建一个伪元素（使用z-index） 。这将使您富有创造力的“容器” div效果，使子元素可以逃脱其边界。

与线性渐变方法相比，此方法的好处是您可以在倾斜的形状上使用背景图像，实际的线性渐变等，而不仅限于一种颜色。

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