How to design aggregations filter in css for week, month?

Problem :

I want to design aggregation filter for week, month,etc. like following image. Please see the image, I want to design same-way

Image:image for which I want to design css

Please see the demo for DEMO

<style type="text/css">
.tag {
    /*display: block;*/
    border: 1px solid #4f9f4f;
    padding: 6px 12px;
    font: 12px/17px 'OpenSansLight';
    color: #4f9f4f;
    text-decoration: none;
}
.tag-leftmost {
    border: 1px solid #4f9f4f;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px; 
    padding: 6px 12px;
    font: 12px/17px 'OpenSansLight';
    color: #4f9f4f;
    text-decoration: none;
}
.tag-rightmost {
   border: 1px solid #4f9f4f;
     border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;   
    padding: 6px 12px;
    font: 12px/17px 'OpenSansLight';
    color: #4f9f4f;
    text-decoration: none;
}
.tag-center tag{

}
</style>



<div class="col-md-12 col-sm-12">
     <a title="week? category" ng-model="today_placement" class="tag-leftmost">Today</a>
     <a title="week? category" ng-model="week_placement" class="tag">week</a>
     <a title="week? category" ng-model="month_placement" class="tag">month</a>
     <a title="week? category" ng-model="year_placement" class="tag-rightmost">year</a>
  </div>

Solution :

Try using CSS triangles hack to make that arrow. Check .tag:hover:after

.wrapper {
  border: 1px solid #4f9f4f;
  border-radius: 20px;
  padding: 0 14px;
  float: left;
}
.tag {
  padding: 6px 12px;
  font: 12px/17px'OpenSansLight';
  color: #4f9f4f;
  text-decoration: none;
  /* ADDED for :after */
  position: relative;
  float: left;
}
.tag:not(:first-child):not(:last-child) {
  border-radius: 0;
  border-left: 1px solid #4f9f4f;
  border-right: 1px solid #4f9f4f;
}
.tag:hover {
  background-color: red;
  border-color: red;
}
.tag:hover:after {
  content: '';
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: red;
  position: absolute;
  display: block;
  left: 50%;
  top: -10px;
  margin-left: -5px;
}

<div class="wrapper col-md-12 col-sm-12">
  <a title="week? category" class="tag">week</a>
  <a title="week? category" class="tag">week</a>
  <a title="week? category" class="tag">week</a>
</div>