SOURCE

<div class="container">
<i class="i1"></i><div class="progress"><div class="current"></div></div><i class="i2"></i>  
</div>

.i1{
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ff8484;
  border: 10px solid #fe2f49;
  box-sizing: border-box;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0 10px 5px -2px #f0563b;
}
.i2{
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #47cc87;
  border: 10px solid #229255;
  box-sizing: border-box;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0 10px 5px -2px #f0563b;
}
.i1:after{
    content: '看跌';
    display: inline-block;
    height: 100%;
    line-height: 80px;
    font-style: normal;
    color: #229255;
    font-weight: bold;
    font-size: 20px;
}
.i2:after{
    content: '看涨';
    display: inline-block;
    height: 100%;
    line-height: 80px;
    font-style: normal;
    color: #229255;
    font-weight: bold;
    font-size: 20px;
}
.progress{
  display: inline-block;
  width: 150px;
  height: 10px;
  margin-left: -1px;
  margin-right: -1px;
  background: #229255;
}
.progress .current{
  height: 100%;
  width: 80%;
  background: #fe2f49;
}