如何在CSS中创建此形状？ (垂直对齐div)

见图：
 

这就是我所做的：https://jsfiddle.net/5odbwkn5/

.gray-btn1 {
     width: 50px;
     height: 50px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     background: url(../images/ico/9.png) no-repeat center 70%;
     background-color: #5dd6e4;
     margin-left:-20px;
     position: relative;
     float:left;
 }
 .gray-btn {
     width: 50px;
     height: 50px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     background: url(../images/ico/9.png) no-repeat center 70%;
     background-color: #5dd6e4;
     margin-right: -20px;
     position: relative;
     float:right;
 }
 .gray-mid {
     background-color: #5dd6e4;
     text-align:center;
 }

<div class="gray-mid">
    <div class="gray-btn1"><span class="fa-connectdevelop">left</span>
    </div>
    <div class="gray-btn"><span class="fa-connectdevelop">right</span>
    </div>
    <div style="height:100px">middle</div>
</div>

.container:before {
    content:' ';
    display:block;
    height: 30px;
    width:30px;
    background-color:#999;
    border-radius:15px;
    position:absolute;
    left:-15px;
    top:7px;
}
.container:after {
    content:' ';
    display:block;
    height: 30px;
    width:30px;
    background-color:#999;
    border-radius:15px;
    position:absolute;
    right:-15px;
    top:7px;
}

这是我为你制作的FIDDLE作为例子.

编辑：我更新了小提琴,以确保圆圈(“之前”和“之后”)位于容器后面.并稍微移动元素,使其更符合您的图像.