How to make this CSS button using Angled, Drop shadow, Inset shadow with flexibility in width

Question

How to make this CSS button with Angled, Drop shadow, Inset shadow with flexibility in width?

I tried to do it here http://jsfiddle.net/jitendravyas/6RsnN/ , but you should not point to it angle and how to create cut- outside the border.

And the button should be flexible in width.

I only do this for iphone, so full CSS3 is allowed.

Answer 1

The final result :

blank css button http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png

Demonstration of flexibility :

Although I tried to make the button as in the picture, some parts may not be the same. Will consider this a proof of concept.

This button can be pure CSS with only a lot of extra markup with this markup:

 <a class="btn"> <span class="triangle"></span> <span class="btn_inner"> <span class="triangle"></span> Back </span> </a> 

The basic trick for creating triangles with the box-shadow tag involves several steps:

• Step 1 Create the ".triangle" element - this will be the wrapper for the real triangle.
• Step 2 Apply position: absolute; correct its width and height :
  red background color - for demonstration
  
  
  
• Step 3 Create a large square element. Triangle :: before '- it will be the "real" triangle after step 6
• Step 4 Rotate it 45 degrees ( transform: rotate(45deg) ).

• Step 5 Add a shadow box.
  Result after step 3:
  

• Step 6 Add overflow: hidden; Ta-dum!
  

In .tag_inner use the same trick, but box-shadow should not be inset , but normal.

Note that if you will use this trick, always check which vendor prefixes should be used and put the property without the prefix in last place.

Update: Make markup more semantic - only one element for the triangle trick.

Answer 2

Here is your angle, but since it is already a border, you cannot put a border on it:

 body {padding:40px; background-color: #1693da;} .input { display:block; text-decoration:none; padding:10px 60px; background:#117ebb; font-size:60px; color:#fff; border-radius: 20px; box-shadow: 0px 10px 0px #003355; position:relative; } .input:after { position:absolute; top:0; left:-32px; content:" "; width: 0; height: 0px; border-top: 45px solid transparent; border-bottom: 45px solid transparent; border-right:45px solid #117ebb; }