Сергей Горячев

Никак. С теми условиями, которые ты указал.
С дополнительной оберткой - https://jsfiddle.net/webirus/h0brgkhe/2/

background: url('ссылка_на_картинку') 0% 100% repeat-x #000000; // в конце цвет фона

Вот иногда, смотря на такие работы, хочется расстрелять дизайнеров.
Не думаю, что найдется кроссбраузерное и адаптивное решение на чистом css.
Можно поиграться с SVG, но придется сильно заморочиться над адаптивностью.
Я бы делал картинками. Так будет удобней всего.

Не вижу проблемы сделать инлайновый указатель цвета.

<div class="block" style="background: <?php echo $color ?>;">

plugins.jquery.com/tag/colorpicker

Очевидно же - задать фиксированную высоту для блочков.

Либо задать блокам display: inline-block; vertical-align: top;, там правда трабла будет с промежутками.

А вообще, конечно, самым правильным было бы использовать display: flex; и @supports {}.
Где работает flexbox - будет flexbox, а где нет - обычные inline-block или float left.

Если средствами CSS нельзя, из-за изменения размеров контентом.

Юзайте JS, отлавливайте самый высокий блочок и остальные выравнивайте с ним.
В принципе, JS смена высоты для таких задач - постоянная практика.

dotdotdot.js

Ноль проблем)
Только нужно отрисовать дизайнеру, какое нужно поведение.
Просто масштабировать или менять направление, к примеру, можно по-разному.
В общем, нужно просто понимать, что хочет дизайнер.

ru.crazysquirrel.ru/tools/generators/map-area

Градусы, размеры и остальное подбирайте под свою фигуру.
https://jsfiddle.net/v8v0swa4/

.div {
  width: 100px;
  height: 100px;
  border: 3px solid red;
  border-bottom: 0;
  position: relative;
}
.div:after, .div:before {
  position: absolute;
  content: '';
  width: 57px;
  border-top: 3px solid red;
  bottom: -11px;
}
.div:before {
  left: -4px;
  transform: rotate(20deg);
}
.div:after {
  right: -4px;
  transform: rotate(-20deg);
}

Оригинал - https://jsfiddle.net/bjopf7o1/
Перестройка - https://jsfiddle.net/53jsxowg/

Вся магия в коде:

.wrapper {
  width: 150px;
}

.wrapper {
  width: 450px;
  display: flex;
  flex-direction: column;
  height: 70px;
  flex-wrap: wrap;
}

Еще вариант - https://jsfiddle.net/009qhczy/

.wrapper {
  width: 450px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.block:nth-child(odd) {
  order: 1;
}
.block:nth-child(even) {
  order: 2;
}

Для особо ярых противников flex - https://jsfiddle.net/rxe51vtf/
Решение с использованием абсолютного позиционирования.