Clip-path with an element that comes out of div

Question

I can't figure out how to make visible the bottom part of the slider in this row where i used clip-path to make the background with angled top and bottom. I tried z-index, overflow and position:relative in combination with all elements but nothing helped:

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

Answer 1

You can use a pseudo element to create this effect.

Give the parent div a width and position: relative then create a pseudo element with position: absolute, width:100% and height: 100% that sits behind it (using z-index). This will let you creative the effect of a "container" div that allows children elements to escape its bounds.

The upside to this method, versus the linear gradient method, is that you can use background-images, actual linear-gradients, etc. on your slanted shape — you're not limited to a single color.

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

Answer 2

As I commented above here is an alternative to create the background without the use of clip-path which is also better supported and easier to manage:

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