Button with beveled edge on semi-transparent background - css

Question

I'm trying to create a button with CSS that will sit on a semi-transparent background that has a beveled or cut edge to it. Here is the Photoshop mockup:
I'm able to do this successfully with a solid color background because I can use an pseudo element with that same background and "cover" the edge of the button, but it doesn't work with a semi-transparent background.
Here's what I've got so far, on a solid background: http://codepen.io/anon/pen/GJFpc
I'm beginning to believe this isn't possible with just CSS, but still hoping S.O. can save me once again!

Answer 1

I love a good css challenge so I tried a few things and this is what I could come up with:
http://jsfiddle.net/QE67v/3/
The css (unprefixed) looks like this:
a.cta {
position: relative;
float: left;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset 0 -2px 1px 2px #fff;
line-height: 16px;
height: 16px;
z-index: 2;
}
a.cta:after {
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
right: -16px;
top: 0;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset -3px -2px 1px 2px #fff;
transform: skewX(-45deg);
z-index: -1;
}
There are two main differences with your code:
I use a inset box-shadow to achieve the white 'bevel'. You could
probably do this with gradients as well, but I just find the shadows
more intuitive.
In stead of making the button wider and covering the bottom left
corner with a pseudo element in the color of the background, I kept
the button in its normal width and added a pseudo element to which a
applied the skewX transformation. This allows for any background, as
you can see by the gradient I set as a background in my fiddle.
I believe this is what you where after. Feel free to ask if you need any further help/explanation.