@Coffeeyok

Как в CSS Соединить блоки с вот такой формой?

.Page_2_bg_1 {
    height: 100vh;
    width: 33%;
    background-image: url(D:/Brackets/CoffeeHouse/Img/bg2-1.jpg);
    background-size: 100% 100vh;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}


.Page_2_bg_2 {
    height: 100vh;
    width: 34%;
    background-image: url(D:/Brackets/CoffeeHouse/Img/bg2-2.jpg);
    background-size: 100% 100vh;
    background-repeat: no-repeat;
    margin: 0;
    -webkit-clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}


.Page_2_bg_3 {
    height: 100vh;
    width: 33%;
    background-image: url(D:/Brackets/CoffeeHouse/Img/bg2-3.jpg);
    background-size: 100% 100vh;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}


Сайт не хочет мой скриншот принимать, поэтому обьясню в двух словах :)

3 Блока в контейнере, у контейнера flex-box стоит, у блока по середине форма трапеции, у других двух тоже трапеция, только сверху вниз, как их склеить? float не помогает, Заранее Спасибо!
  • Вопрос задан
  • 94 просмотра
Пригласить эксперта
Ответы на вопрос 2
@tixxxxon
Я стараюсь быть веб-разработчиком
хммм... можно попробовать обернуть их в контейнер, родительскому задать position: relative;
у дочерних применять либо LEFT, right либо через transform: translate
Ответ написан
Комментировать
@Ibishka
Justify con space betwen
И контейнкру задаешь ширину 100%
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы