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

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.

Answer 2

Having thought about it more, this is a more elegant solution that allows much more effective styling and the use of just one HTML element. Using this method, we can achieve the results in your concept completely.
HTML
Back
CSS
a.button {
text-decoration:none;
color:#111;
text-shadow:0 1px 0 #fff;
font-weight:bold;
padding:10px 10px;
font-size:14px;
border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
float:left;
margin-left:30px;
margin-top:20px;
position:relative;
font-family:verdana;
color:#3b3d3c;
border:1px solid #666;
border-left:0;
background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);
}
a.button:after {
content:"";
width:25px;
height:25px;
background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
position:absolute;
top:5px;
left:-14px;
z-index:-1;
border:1px solid #666;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
border-left:0;
left:-13px;
}
The last rule is for Chrome, which otherwise renders the result slightly differently.
Hope this helps.

Answer 3

You can create such an effect using 2 elements side by side wrapped in the anchor tags.
<style type="text/css">
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid orange;
float:left;
}
.button {
float:left;
height:60px;
background:orange;
width:50px;
line-height:60px;
font-weight:bold;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
</style>
</div><div class="button">Back</div>
I'm not sure if it's the most refined solution, but it certainly looks the same as your concept art and functions as intended.