CSS Custom shape twitter bootstrap button

Question

Spent 2 hours already, trying to get it work, but so far I only get this:

.btn-custom{ width:100%; border-bottom: 100px solid blue; border-left:80px solid transparent; }

.btn2 {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0px;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);

}

and this would be the button itself:

<a href="#" style="height:145px;line-height:80px;font-size:18px;" class="btn2 btn-block btn-custom">test</a>

What I'm trying to make is this:

I think I would also need the transform:rotate function to rotate the button, but is there a way to rotate it, without rotating the text?

At the moment, with the code I've posted above the button isn't looking the way it should look, it's a bit shorter (height), the text is not where it should be and if I rotate it, the text rotates too. That is what it looks like now:

Could anyone help me with this?

Answer 1

Is there a reason why you don't want to use css shapes? Check out the demo I put together (result and snippet) it might help you.

Answer 2

You can do this by using that image as background for that particular div.