Search code examples
htmlcsssvgz-index

Overlapping Polygon's, z-index and before/after

I want to reach this result: enter image description here This is what i have atm: http://mijnwebsitebestellen.be/index.php

So i am currently using SVG elements to slice of the images. You can inspect the code in your browser. I can't get the result right because of z-index issues.

Any tips or examples of any sort are appreciated.

Solution

  • You can achieve the same result using pure CSS.

    • Use a container element for background color and image
    • Use the pseudo element ::after with a white right border to imitate the right edge
    • Use some divs of the same class .tile to imitate the stripes with transform: skewX(-10deg); and let them float: right;

    Et voilà:

    .container {
  height: 300px;
  width: 400px;
  background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(https://i.sstatic.net/e11Va.jpg);
  background-size: cover;
  color: white;
  position: relative;
  padding-right: 26px;
}
.container::after {
  content: "";
  position: absolute;
  display: block;
  right: 0;
  bottom: 0;
  height: 0;
  width: 0;
  border: none;
  border-left: none;
  border-right: 52px solid white;
  border-top: 300px solid transparent;
  border-bottom: none;
}
.tile {
  width: 30px;
  height: inherit;
  background: rgba(0, 0, 0, 0.6);
  border-left: 5px solid white;
  transform: skewX(-10deg);
  float: right;
}
    <div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

    Of course you can add content to the container. Just use another div inside the container and give it the apropriate width.