带有来自 div 的元素的剪辑路径答案

【问题标题】：Clip-path with an element that comes out of div带有来自 div 的元素的剪辑路径
【发布时间】：2018-03-18 17:36:48
【问题描述】：

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

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

【问题讨论】：

这很简单：你不能......考虑使用线性渐变来创建有角度的背景

【解决方案1】：

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

给父 div 一个宽度和position: relative，然后创建一个伪元素，其后面有position: absolute、width:100% 和height: 100%（使用z-index）。这将让您创造“容器” div 的效果，允许子元素逃脱其边界。

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

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

【讨论】：

【解决方案2】：

正如我在上面评论的，这里是创建背景的替代方法，无需使用剪辑路径，这也得到更好的支持且更易于管理：

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

【讨论】：