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

css, mobile-webkit, webkit

Solution

The final result is:

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

Demonstration of flexibility:

Although I tried to make a button like in the picture, but some parts may not be the same. Would consider it a proof of concept.

This button can be pure `CSS` only with 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 main trick for creating triangles with box-shadow includes several steps:

Step 1. Create element '.triangle' - it will be a wrap for real triangle.

Step 2. Apply `position: absolute;`, fix its `width` and `height`: red background-color is onle for demo

Step 3. Create big square element '.triangle::before' — it will be 'real' triangle after step 6

Step 4. Turn it 45 degrees (`transform: rotate(45deg)`).

Step 5. Add box-shadow. The result after step 3 is:

Step 6. Add `overflow: hidden;` Ta-dum!

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

Notice, that if you will use this trick always check what `vendor` prefixes must be used and place property without prefix on the last place.

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

Problem

Original source