如何在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; }

    
left    
    
right    
    
middle

.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作为例子.

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