Wie 3 divs nebeneinander bekommen unter einem Winkel

Question

ich so etwas in meinem Kopf 3 divs auszurichten haben:
Red div1 ist, gelb div2 ist, ist grün div3. Sie sind nebeneinander, aber sie sind unter einem Winkel. Wie erreiche ich das? Über CSS?

Answer 1

können Sie verwenden transform: rotate()

.parent { 
 
    display: flex; 
 
    overflow: hidden; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 2px solid black; 
 
} 
 
.box { 
 
    height: 100%; 
 
    transform: skew(15deg); 
 
} 
 
.box:nth-child(1) { 
 
    background: #F40C42; 
 
    margin-left: -30px; 
 
    flex: 0 0 150px; 
 
} 
 
.box:nth-child(2) { 
 
    background: #DBF408; 
 
    flex: 0 0 170px; 
 
    border-left: 2px solid black; 
 
    border-right: 2px solid black; 
 
} 
 
.box:nth-child(3) { 
 
    background: #58F40B; 
 
    flex: 0 0 150px; 
 
}

<div class="parent"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>