提交按钮中间的半透明三角形

Question

我尝试在表单上创建一个提交按钮，如下所示：http://nulaena.si/temp/triangle.jpg（中间是一个半透明的三角形）。

这就是我现在所拥有的：http://jsfiddle.net/ptinca/UJUAT/3/

这只能用CSS吗？任何帮助将不胜感激。

Answer 1

使用透明的PNG图像作为提交按钮的背景图像应该可以正常工作。

background: url(subscribe.png) transparent no-repeat;

修改

为了澄清，当然，图像应该是橙色背景，其中包含三角形。

Answer 2

有一种非常简单的方法可以做到甚至不需要CSS3，但只使用css2伪类。要注意的重要更改是您不能在内联元素（如输入）上应用伪类，因此我必须将输入提交按钮更改为按钮元素

这是附加代码：

html:
<form>
<input type="text" name="email" value="enter your email address" class="besedilo" />
<button type="submit" name="subscribe" value="subscribe" class="submit">Subscribe</button>
</form>

css:
button { position: relative; }
button:after {
content: '';
position: absolute;
top: 14px; right: 17px;
height: 0; width: 0;
border-top: solid 6px transparent;
border-left: solid 6px #fff;
border-bottom: solid 6px transparent;
}