Skewed Text Link

by Umar

HTML

<p>This is some demo text, with an <a href="#">inline link</a>. This is a bit more text, so you can tell it's really inline.</p>

CSS

a {
    background: #369;
    text-decoration: none;
    color: #fff;
    display: inline-block;
    position: relative;
    padding: 0 4px;
    transform: skew(-10deg,0);
    -ms-transform: skew(-10deg,0); /* IE 9 & Only IE 9 */
    -webkit-transform: skew(-10deg,0); /* Safari and Chrome */
    -o-transform: skew(-10deg,0); /* Opera */
    -moz-transform: skew(-10deg,0); /* Firefox */
}
a span {
    display: inline-block;
    position: relative;
    transform: skew(10deg,0);
    -ms-transform: skew(10deg,0); /* IE 9 & Only IE 9 */
    -webkit-transform: skew(10deg,0); /* Safari and Chrome */
    -o-transform: skew(10deg,0); /* Opera */
    -moz-transform: skew(10deg,0); /* Firefox */
}

JavaScript

var a = document.getElementsByTagName('a');

for(var i = 0; i < a.length; i++) {
    a[i].innerHTML = '<span>' + a[i].innerHTML + '</span>';
}