Как сверстать такой блок?

Question

[Алексей]

Помогите сверстать такой блок, не совсем понимаю как это сделать! (

Answer 1

[Никита Михайлов]

Три блока. С помощью flex выстраиваешь в один ряд. Добавляешь нужные зелёные границы сверху и по бокам (кроме последнего элемента. Можно всем выставить border-right).

Нижний блок это будет отдельная сущность на зелёном фоне

Answer 2

[Роман Рофл]

HTML
div class="container">
div class="first">
div class="second">
div class="third">
container /div

CSS

.container{
display: flex;
flex-direction: row;
}
.first, .second, .third{
margin-right:10px;
padding-top: 10px;
width: 400px;
height: 300px;
background-color: black;
color: white;
text-align: center;
}

Answer 3

[Икотий Айтишевич]

https://codepen.io/garisun/pen/ZEOoMpL
И это на почитать: https://developer.mozilla.org/ru/docs/Learn/Gettin...