Если у вас задача просто создать полосатый блок со сплошными цветами, то здесь можно воспользоваться линейным градиентом. В задаче для демонстрации применил целых 3.
Для разметки рекомендую использовать flexbox. В данном примере многие измерения выражены в единицам экрана (vw
и vh
), а также в единицах градиента используются проценты. Но это необязательно и остаётся полностью на усмотрение тех, кто воспользуется данным примером, творчески адаптируя его под себя.
body {
margin: 0;
}
.content {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
background-color: #cecece;
}
.first-row {
margin: 10px;
height: 20vh;
background: linear-gradient(to bottom, #0587A4 80%, transparent 80%, transparent 85%, #0587A4 85%);
}
.second-row {
display: flex;
height: 60vh;
}
.brick-column {
width: 20vw;
margin: 10px;
background: linear-gradient(to bottom, #0587A4 25%, transparent 25%, transparent 30%, #0587A4 30%, #0587A4 55%, transparent 55%, transparent 60%, #0587A4 60%, #0587A4 85%, transparent 85%);
}
.center-column {
width: 60vw;
background: linear-gradient(to bottom, #fff 90%, transparent 90%, transparent 95%, #fff 95%);
}
<div class="content">
<div class="first-row">
</div>
<div class="second-row">
<div class="brick-column">
</div>
<div class="center-column">
</div>
<div class="brick-column">
</div>
</div>
</div>