CSS圆形箭头

Question

我尽力使用CSS http://imgur.com/Zz6HqWZ创建它，我需要的最后一件事是圆形箭头，但我似乎无法正确使用它。任何人都可以给我一些关于如何在照片中创建箭头圈的指示。任何事都有帮助，欢呼。

.container .row {text-align:center; position:relative;}
.center {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.left {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

.right {
  display:inline-block;
  background-color:#1f497d;
  width:100px;
  height:50px;
  border-width:3px;
  border-style:solid;
  border-color:#ededed;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
  margin-left:-35px;
}

.circle {
  display:inline-block;
  background-color:#006850;
  width:85px;
  height:85px;
  border-width:3px;
  border-style:solid;
  border-color:#fefefe;
  border-radius:50%;
  box-shadow: 0px 1px 5px #888888;
  margin-bottom:-15px;
}

.invisible {
  visibility:hidden;
  display:inline-block;
  background-color:#1f497d;
  width:130px;
  height:65px;
  border-width:3px;
  border-style:solid;
  border-color:#d6d6d6;
  border-radius:7px;
  box-shadow: 0px 1px 5px #888888;
}

<div class="container">
  <div class="row">
    <div class="center"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="left"></div>
    <div class="invisible"></div>
    <div class="right"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="invisible"></div>
    <div class="circle"></div>
    <div class="invisible"></div>
  </div>
  <div class="row" style="margin-top:-15px;">
    <div class="left"></div>
    <div class="invisible"></div>
    <div class="right"></div>
  </div>
  <div class="row">
    <div class="center"></div>
  </div> 
</div>