Как разместить два блока со скосом?

Question

Подскажите, пожалуйста, как расположить два div в одну строку так, чтобы появился статичный скос. Я попробовал использовать clip-path:polygon, но при расширении/сужении экрана скос меняется по ширине. Заранее спасибо!

.main {
    height: 600px;
    border: 4px solid black;
    display: flex;
    position: relative;
    overflow: hidden;

}
.main-right {
    width: 56%;
    height: 100%;
    background: rgb(248, 130, 130);
    position: absolute;
    z-index: 1;
    right: 0;
}


.main-left {
    height: 100%;
    width: 56%;
    background: rgb(158, 171, 248);
    left: 0;
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
    z-index: 2;
    position: absolute;
}

<div class="main">
        <div class="main-left">
            <img src="./marra-m7fT6OreZfI-unsplas.jpg" alt="">
        </div>
        <div class="main-right">
            <img src="./marra-m7fT6OreZfI-unsplash.jpg" alt="">
        </div>
    </div>

Answer 1

.main {
    height: 600px;
    border: 4px solid black;
    display: grid;
    position: relative;
    overflow: hidden;
      grid-template-columns: 1fr 1fr;

}
.main-right {
    width: 100%;
    height: 100%;
    background: rgb(248, 130, 130);
    position: absolute;
    z-index: 3;
    right: -50%;
transform: skew(30deg);
  overflow: hidden;
}


.main-left {
    height: 100%;
    width: 100%;
    background: rgb(158, 171, 248);
    left: 0;
  
    z-index: 2;
    position: absolute;
     
}
.main-right img{

transform: skew(-30deg) translate(-220px);

  width: 100%;
  height: 100%;
  
}
.main-left img{

  width: 100%;
  height: 100%;
}

<div class="main">
        <div class="main-left main-img">
            <img src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
        </div>
        <div class="main-right main-img">
            <img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
        </div>
    </div>

я бы попробовал это сделать так. или вот https://html5book.ru/css-figury/ может на основе этого вдохновитесь как реализовать что вам необходимо

Answer 2

clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);

clip-path: polygon(0% 0%, 100% 0%, calc(100% - 50px) 100%, 0% 100%);

.main {
    height: 600px;
    border: 4px solid black;
    display: flex;
    position: relative;
    overflow: hidden;

}
.main-right {
    width: 56%;
    height: 100%;
    background: rgb(248, 130, 130);
    position: absolute;
    z-index: 1;
    right: 0;
}


.main-left {
    height: 100%;
    width: 56%;
    background: rgb(158, 171, 248);
    left: 0;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 50px) 100%, 0% 100%);
    z-index: 2;
    position: absolute;
}

<div class="main">
        <div class="main-left">
            <img src="./marra-m7fT6OreZfI-unsplas.jpg" alt="">
        </div>
        <div class="main-right">
            <img src="./marra-m7fT6OreZfI-unsplash.jpg" alt="">
        </div>
    </div>

БЛОГ НА HUSL

Как разместить два блока со скосом?

Ответы (2 шт):