Как сверстать такой макет?
скос можно еще треугольниками (бордерами) делать.<body>
    
    <div class='square-top'></div>
    <div class='triangle-border'></div> 
    <div class='square-bottom'></div>
</body>body{
    width:500px;
    margin: 0 auto;
    background-color: red;
}

.square-top{
    background-color:white;
    height:100px;  
}

.triangle-border{
     
    border-left: 250px solid blue;
    border-right: 250px solid green;
    border-top: 20px solid blue;
    border-bottom: 20px solid green;
}

.square-bottom{  
    background-color:black;
    height:100px  
}
просто то что белым фоном это png с прозрачностью.
То есть идет три блока:
1 верхний с линией 
2 с белым фоном
3 все что ниже
Вертикальная полоса это скорее всего css