Semitransparent triangle shape in the middle of a submit button

I’m trying to make a submit button on my form look like this: http://nulaena.si/temp/triangle.jpg
(a semitransparent triangle in the middle).

This is what I have at the moment: http://jsfiddle.net/ptinca/UJUAT/3/

Is this possible with CSS only? Any help will be much appreciated.

Problem courtesy of: belovah

Solution

using a transparent PNG image as a background image for the submit button should work.

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

EDIT:

To clarify, the image should have the orange background with the triangle in it, of course.

Solution courtesy of: Rodik

Discussion

There’s a very easy way to do this that doesn’t even require CSS3
, but only use of css2 pseudo classes. The important changes to note are that you can’t apply pseudo classes on inline elements such as inputs, so I had to change your input submit button to a button element

Here’s the additional code:

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

Discussion courtesy of: DMTintner

This recipe can be found in it’s original form on Stack Over Flow
.

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Semitransparent triangle shape in the middle of a submit button

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录