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

Question

[Coffeeyok]

.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 не помогает, Заранее Спасибо!

Comments

[Rustam Bainazarov]

Слушайте, ну ведь правда, что вы ожидаете без скриншотов того, как оно есть, и того, как оно надо? Уже 100 лет есть тот же https://ru.imgbb.com/ в качестве хостинга растровых картинок и песочница а-ля https://jsfiddle.net/, куда надо кидать ваш код.

В таком виде это никуда не годится. Как вижу, у вас там локальные пути, поэтому ссылку на сайт даже не прошу. Сделайте песочницу.

[Сергей delphinpro]

Рустам Байназаров,

Уже 100 лет есть тот же https://ru.imgbb.com/ в качестве хостинга растровых картинок

да и хабрасторэйдж никуда не делся...

[Сергей delphinpro]

Среднему блоку дать отрицательные маргины справа и слева.

[Rustam Bainazarov]

Сергей delphinpro, у меня почему-то еле грузит туда.

Answer 1

[Дмитрий]

хммм... можно попробовать обернуть их в контейнер, родительскому задать position: relative;
у дочерних применять либо LEFT, right либо через transform: translate

Answer 2

[Ibishka]

Justify con space betwen
И контейнкру задаешь ширину 100%