How to make one side of a div pointy with CSS?

Question

I'm trying to create a pointy button like this:

So far, I was only able to achieve this:

I thought increasing the horizontal border-radius would make it sharp, but all it does it make the roundness longer.

HTML

<a class="button">Back</a>

CSS

.button {
    display: inline-block;
    height: 3em;
    padding: 0 0.7em 0 1.4em;
    border: 0.1em solid black;
    border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
    background: -moz-linear-gradient(
        top,
        #fff,
        #ccc
    );
}

Answer 1

You don't want to be using border-radius as that assigns a quarter-circle shape to each specified corner. Instead you hack it with specific border-width properties, as illustrated in this site: http://www.howtocreate.co.uk/tutorials/css/slopes

However I feel you're solving the problem the wrong way; what you're doing is best done using a background image, which is how the iOS-style Back buttons are implemented in iPhone-for-web stylesheets. If you need something resolution-independent then you can use SVG without penalty now.