Pure CSS Tags

_tags.html

<div class="tags">
   <a href="">Tag 1</a>
  <a href="">Tag 2</a>
  <a href="">Tagagagagagagagagag 3</a>
</div>

_tags.sass

=tag($bgcolor: blue)
  position: relative
  whitespace: no-wrap
  display: inline-block
  text-decoration: none
  color: white
  padding: .5em .5em .5em 2em
  line-height: 1em
  +background-image(linear-gradient(to right, transparent 0, transparent 1.25em, $bgcolor 1.25em, $bgcolor 100%))
  &:before
    z-index: 0
    content: ""
    float: left
    position: absolute
    top: 0
    left: 4px
    width: 0
    height: 0
    border-color: transparent $bgcolor transparent transparent
    border-style: solid
    border-width: 1em 1em 1em 0
  &:after
    z-index: 50
    content: ""
    position: absolute
    top: -webkit-calc(1em - 2px)
    top: -moz-calc(1em - 2px)
    top: calc(1em - 2px)
    left: 1em
    width: 4px
    height: 4px
    border-radius: 50%
    background-color: #fff
    box-shadow: -1px -1px 2px white
.tags
  margin: 3em
  a
    +tag