如何设计css中的聚合过滤器为周，月？

Question

我想为周，月等设计聚合过滤器。像下面的图片。 请参阅形象，我想设计的同路

图片：image for which I want to design css

请参阅演示了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> 

Answer 1

尝试使用CSS三角形破解使该箭头。检查.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>