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

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;
}