html - 送信ボタンの中央にある半透明の三角形

Question

フォームの送信ボタンを次のようにしようとしています: http://nulaena.si/temp/triangle.jpg (真ん中の半透明の三角形)。

これは私が現時点で持っているものです: http://jsfiddle.net/ptinca/UJUAT/3/

これはCSSのみで可能ですか？どんな助けでも大歓迎です。

Answer 1

これを行うには、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;
}

Answer 2

送信ボタンの背景画像として透明な PNG 画像を使用するとうまくいくはずです。

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

編集：

明確にするために、もちろん、画像には三角形が入ったオレンジ色の背景が必要です。