Верстка нестандартных блоков

[РоманФ]

Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно.

Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей.

И остро стоит вопрос чтобы это все дело было адаптивно.

На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом,  мне хотябы общие принципы объяснить в каком направлении дальше двигаться

Edited May 7, 2020 by РоманФ
Написал подробнее

[Switch74]

пока такой вариант, если будет время доделаю
https://jsfiddle.net/96tqa10m/1/

[AlexZaw]

РоманФ судя по скругленным окончанием кривой, она сделана с помощью svg. Сделал грубый пример без свг, но принцип остального, думаю, будет понятен:

<div class="wrap">
  <div class="box">
    <div class="line1">
      <div class="item"><span></span></div>
      <div class="item"><span></span></div>
      <div class="item"><span></span></div>
    </div>
    <div class="line2">
      <div class="item"><span></span></div>
      <div class="item"><span></span></div>
    </div>
  </div>
</div>

*,
:after,
:before {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  justify-content: center;
  width: 500px;
  border: 1px solid #000;
  overflow: hidden;
}
.box {
  display: inline-block;
  position: relative;
}
.box:before {
  content: "";
  height: 130px;
  width: 130px;
  position: absolute;
  left: -100px;
  top: 42%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top: 5px solid #ccc;
}
.box:after {
  content: "";
  height: 130px;
  width: 130px;
  position: absolute;
  right: -100px;
  top: 42%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top: 5px solid #ccc;
}

.line2 {
  margin-top: 100px;
  margin-left: 77px;
}

.item {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: inline-block;
  position: relative;
  background: #f00;
}
.item:not(:last-child) {
  margin-right: 50px;
}
span {
  background: inherit;
}
.line1 .item:after {
  content: "";
  height: 130%;
  width: 130%;
  position: absolute;
  left: -15%;
  top: 40%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-bottom: 5px solid #ccc;
}
.line2 .item:after {
  content: "";
  width: 130%;
  height: 130%;
  position: absolute;
  left: -15%;
  top: -70%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top: 5px solid #ccc;
}
.line1 .item:before {
  content: "";
  height: 20px;
  width: 20px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 156%;
  z-index: 1;
  transform: translateX(-50%);
}
.line2 .item:before {
  content: "";
  height: 20px;
  width: 20px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: -78%;
  z-index: 1;
  transform: translateX(-50%);
}
.line1 span:before {
  content: "";
  height: 50px;
  border-left: 1px dotted #000;
  position: absolute;
  left: 50%;
  top: 120%;
  transform: translateX(-50%);
}
.line1 span:after {
  content: "";
  width: 25px;
  height: 25px;
  background: inherit;
  border: 1px solid #00f;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%) rotate(36deg) skewY(20deg);
  z-index: -1;
}
.line2 span:before {
  content: "";
  height: 50px;
  border-left: 1px dotted #000;
  position: absolute;
  left: 50%;
  top: -70%;
  transform: translateX(-50%);
}
.line2 span:after {
  content: "";
  width: 25px;
  height: 25px;
  background: inherit;
  border: 1px solid #00f;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%) rotate(36deg) skewY(20deg);
  z-index: -1;
}

 

[РоманФ]

Спасибо ребят за потраченно на это время, у меня на разбор ушло и подгон всего этого ушлa куча времени)

Выручили)принцип понял.
Приятно что все конструктивно и по делу.