CSS Custom shape twitter bootstrap按钮

Question

已经花了2个小时，试图让它工作，但到目前为止我只能得到这个：

.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);

}

这就是按钮本身：

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

我想要做的是：

我想我还需要变换：旋转功能来旋转按钮，但有没有办法旋转它，而不旋转文字？

目前，使用上面发布的代码，按钮看起来不应该看起来，它有点短（高度），文本不应该在哪里，如果我旋转它，文字也旋转了。这就是现在的样子：

有人可以帮我吗？

Answer 1

您是否有理由不想使用css形状？看看我放在一起的演示（result和snippet），它可能对你有帮助。

Answer 2

您可以使用该图像作为该特定div的背景来执行此操作。