<div class="tags">
    <a href="#">tag1</a>
    <a href="#">tag2</a>
    <a href="#">tag3</a>
</div>
.tags{
    margin:0 auto;
    padding:15px 0;
    right:24px;
    bottom:-12px;
    list-style:none;
    max-width: 300px;
    }
.tags li, .tags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;
    }
.tags a{
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
    -moz-border-radius: 0 4px 4px 0px;
    -webkit-border-radius: 0 4px 4px 0px;    
    border-radius: 0 4px 4px 0px;    
    } 
.tags a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;      
    }
.tags a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
    }
.tags a:hover{background:#555;} 

.tags a:hover:before{border-color:transparent #555 transparent transparent;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.