Arrow Header

Original: http://css-tricks.com/examples/ArrowHeaders/

by Jens Grochtdreis

HTML

<h1>Original version with links</h1>
<h2>Fork me on <a class="arrowed" href="#">github</a></h2>
<h2>Made with <a class="arrowed" href="#">YAML</a></h2>
<h2><a class="arrowed" href="#">Link to an article</a></h2>

<h1>New version with spans</h1>

<h2><a href="#">Fork me on <span class="arrowed">github</span></a></h2>
<div class="arrowcnt"><a href="#">Fork me on <span class="arrowed">github</span></a></div>

CSS

h2, .arrowcnt { 
    background: #ccc;
    padding: 0 0 0 10px;
    font-size: 16px;
    line-height: 2; 
    text-align: right;
    overflow: hidden;
}

h2 a, .arrowcnt a {
   text-decoration: none;
    color: inherit;
}
.arrowed {
    float: right;
    position: relative;
    text-decoration: none;
    color: #333;
    padding: 0 10px;
    border-left: 5px solid white;
    background-color: #a2d6eb;
    margin-left: 15px; /* only needed because of right alignment */
    -webkit-transition: padding 0.2s;
    -moz-transition: padding 0.2s;
    transition: padding 0.2s;
}

.arrowed:hover {padding: 0 10px 0 30px;}

.arrowed:before,
.arrowed:after {
    content: "";
    position: absolute;
    /* Pushed down half way, will get pulled back up half height of triangle
       ensures centering if font-size or line-height changes */
    top: 50%;
    width: 0;
    height: 0;
}
.arrowed:before {
    left: -12px;
    /* Triangle */
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid white;
    /* Pull-up */
    margin-top: -8px;
}
.arrowed:after {
    /* Smaller and different position triangle */
    left: -5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #a2d6eb;
    margin-top: -6px;
}



/* just for demo */
h2 { margin-bottom: 30px; }
/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

/* clearfix */
.clearfix:after { clear:both; content:"."; display:block; font-size:0; height:0; visibility:hidden; }
.clearfix { display:block; } /* extra for Safari */
.clearfix { *height:1%; }  /* trigger hasLayout for IE6 + 7 */