Semitransparent triangle shape in the middle of a submit button

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

This is what I have at the moment:

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

Problem courtesy of: belovah


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

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


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

Solution courtesy of: Rodik


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:

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

使用声明 | 英豪名录