<div class="container">
  <div class="curve"></div>
  <ul>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
  </ul>
</div>

.container {
  width: 1000px;
  background: #eee;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.curve {
  border: 1px solid black;
  width: 4000px;
  height: 4000px;
  border-radius: 2000px;
  position: absolute;
  top: 95px;
  left: -1500px;
}

.circle {
  list-style: none;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 5px solid #bbb;
  position: absolute;
  border-radius: 50%;
}

.circle:nth-child(1) { top: 105px; left: 100px; }
.circle:nth-child(2) { top: 82px;  left: 250px; }
.circle:nth-child(3) { top: 72px;  left: 400px; }
.circle:nth-child(4) { top: 72px;  left: 550px; }
.circle:nth-child(5) { top: 82px;  left: 700px; }
.circle:nth-child(6) { top: 105px; left: 850px; }