diff --git a/_includes/blog-post.html b/_includes/blog-post.html
index 4d51070..62a7b4b 100644
--- a/_includes/blog-post.html
+++ b/_includes/blog-post.html
@@ -33,17 +33,7 @@
{% endif %}
-{% capture tagsize %}{{post.tags | size}}{% endcapture %}
-{% if tagsize != '0' %}
-
-{% endif %}
+{% include tag-link.html %}
{% if page.post_listing %}
diff --git a/_includes/tag-link.html b/_includes/tag-link.html
index 9d207b6..e1f7f83 100644
--- a/_includes/tag-link.html
+++ b/_includes/tag-link.html
@@ -1 +1,10 @@
-{{tag}}
+{% capture tagsize %}{{post.tags | size}}{% endcapture %}
+{% if tagsize != '0' %}
+
+{% endif %}
diff --git a/css/style.sass b/css/style.sass
index be5938e..736099c 100644
--- a/css/style.sass
+++ b/css/style.sass
@@ -14,6 +14,37 @@ $well-background: #ccc
$link-color: #018cb0
$light-color: #666
+=border-top-right-radius($value)
+ border-top-right-radius: $value
+ -moz-border-radius-topright: 2px
+ -webkit-border-top-right-radius: $value
+
+=border-top-left-radius($value)
+ border-top-left-radius: $value
+ -moz-border-radius-topleft: $value
+ -webkit-border-top-left-radius: $value
+
+=border-bottom-right-radius($value)
+ border-bottom-right-radius: $value
+ -moz-border-radius-bottomright: $value
+ -webkit-border-bottom-right-radius: $value
+
+=border-bottom-left-radius($value)
+ border-bottom-left-radius: $value
+ -moz-border-radius-bottomleft: $value
+ -webkit-border-bottom-left-radius: $value
+
+=border-radius($tr, $br: $tr, $bl: $br, $tl: $tr)
+ +border-top-right-radius($tr)
+ +border-bottom-right-radius($br)
+ +border-bottom-left-radius($bl)
+ +border-top-left-radius($tl)
+
+=background-clip-padding-box
+ -moz-background-clip: padding
+ -webkit-background-clip: padding-box
+ background-clip: padding-box
+
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
color: $content-text
@@ -121,3 +152,55 @@ body
.plusone-container
margin-left: 1em
display: inline
+
+.tag-label
+ +border-radius(2px, 2px, 0, 0)
+ +background-clip-padding-box
+ float: left
+ position: relative
+ background: #ccc
+ margin-left: 16px
+ margin-top: 3px
+ padding: 0 15px 0 14px
+ line-height: 24px
+ font-size: 12px
+ color: #555
+ display: inline-block
+
+.tag-label:first-child
+ margin-left: 7px
+
+.tag-label:before
+ position: absolute
+ left: -7px
+ top: 0
+ width: 0
+ height: 0
+ display: block
+ border-style: solid
+ border-width: 12px 7px 12px 0
+ border-color: transparent #ccc transparent transparent
+ content: ""
+
+/* the "hole" on the left end */
+.tag-label:after
+ content: ""
+ position: absolute
+ width: 5px
+ height: 5px
+ background: $content-background
+ top: 9px
+ left: -1px
+ border-radius: 50%
+ box-shadow: inset 0 1px 1px #aaa
+
+.tag-label:hover:before
+ border-color: transparent $menu-background transparent transparent
+
+.tag-label:hover
+ background: $menu-background
+ color: $menu-text
+ text-decoration: none
+
+.tag-label:hover:after
+ box-shadow: inset 0 1px 1px $menu-background