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


Tags: html,css

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>


    CSS Howto..

    How to access CSS on img tag

    How do I make an image act as a video overlay?

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How to put CSS content in select box and rotate it?

    How do I specify CSS classes for specific rows in a GridView?

    How to change scroll bar position with CSS?

    how to have css affect other divs in the same container

    How to achieve horizontally centered layout with partially liquid column?

    how to make div with image like below in html and css

    How can I center my ul li list inside my div?

    How to find and delete specific row in blogger css with span tag?

    How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row?

    How to start css animation on speciefic height of webpage

    how to write a desktop application which uses HTML and CSS for user interface and python/perl/c++/java for the processing?

    Style
  • element with CSS background, to show only a part of images
  • How To Display only First Word of H2 Heading With JavaScript or CSS

    How can I hide text in this jquery slider?

    How to clear the (CSS) visited history of an Android WebView?

    In CSS, how to scale multiple overlayed images responsively?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How to exclude an Element (via ID) in CSS

    How can I place multiple spans in the same line?

    How to hide Fileupload with simple span by using css

    CSS: How to make selectable boxes?

    How to convert 6 digit color code to 3 digit quickly in css file?

    How to create push button?

    How can one create horizontal tree view using CSS and HTML?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to insert background image on HTML Tag using css?

    How to create an easy responsive grid with one column and two boxes?