Как сверстать такой блок как на изображении? Но по умолчанию картинка правильной прямоугольной формы. Задача заключается именно сверстать такую форму с background-image.
Прошу помощи в реализации.
.parallelogram {
width: 500px;
height: 300px;
clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
border-radius: 10px;
background-image: url(https://i.imgur.com/3OaUddf.jpg);
background-size: 100%;
}
.parallelogram2 {
width: 500px;
height: 300px;
clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
border-radius: 10px;
background-color: #FC0FC0;
opacity: 0.6;
}<div class="parallelogram">
<div class="parallelogram2"></div>
</div>Вот так это можно реализовать. Либо можно в редакторе наложить соответствующий цветовой эффект и использовать эту фотографию с эффектом в качестве background-image, т.е. без создания и наложения второго блока с цветом и прозрачностью.