Перекрытие многоугольник перед/после

Question

Я хочу, чтобы достичь этого результата: Это то, что я есть атм: http://mijnwebsitebestellen.be/index.php

Так я в настоящее время с помощью SVG элементов нарезать изображений. Вы можете проверить код в своем браузере. Я не могу получить результат правильно из-за проблем с z-index.

Любые советы или примеры любого рода оцениваются.

Answer 1

Вы можете добиться того же результата, используя чистый CSS.

• Используйте контейнерный элемент для цвета фона и изображения
• использования псевдо элемент ::after с белой правой границы имитировать правый край
• использовать некоторые дивы одного и того же класса .tile подражать полосы с transform: skewX(-10deg); и пусть они float: right;

вуаля:

.container { 
 
    height: 300px; 
 
    width: 400px; 
 
    background: linear-gradient(rgba(219, 41, 117, 0.6), rgba(219, 41, 117, 0.6)), url(https://i.stack.imgur.com/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>

Конечно, вы можете добавить содержимое в контейнер. Просто используйте другой контейнер внутри контейнера и придайте ему подходящую ширину.