How to make one side div-pointy using CSS?

Question

I am trying to create a pointy button like this:

So far, I could only achieve this:

I thought that increasing the horizontal radius of the border would make it sharp, but all this makes it more rounded.

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

Thinking about it, this is a more elegant solution that allows a much more efficient style and use of only one HTML element. Using this method, we can fully achieve the results in your concept.

HTML

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

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 applies to Chrome, which otherwise makes the result a little different.

Hope this helps.

Answer 2

You do not want to use border-radius , since a quarter circle shape is assigned for each specified angle. Instead, you will crack it using the special border-width properties, as shown on this site: http://www.howtocreate.co.uk/tutorials/css/slopes

However, I feel that you are not solving the problem correctly; what you do is best done using a background image, as iOS-style Back-style buttons are implemented in iPhone-for-web style styles. If you need something independent of permission, then you can use SVG without penalty.

Answer 3

You can create this effect by using 2 elements side by side wrapped in 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> <a href='#'><div class="arrow-left"></div><div class="button">Back</div></a> 

I’m not sure that this is the most perfect solution, but it certainly looks the same as your conceptual art and functions as intended.