Question

I’m tring to create a back button based on the ipad.
I have a button and arrow and can’t seem to reduce the height of the arrow to match with the button. If i reduce the height of arrow it doesn’t show up properly.

Thanks to sandeep for the arrow style..

Here’s my code as to what i hav done so far
http://jsfiddle.net/dVbJr/5/

Answer 1

you can easily make through this css:-

.arrow:after{
    -moz-transform: rotate(45deg);
    background: none repeat scroll 0 0 #F4F4F4;
    border: 1px solid #999999;
    border-radius: 10px 10px 10px 10px;
    content: "";
    height: 75px;
    position: absolute;
    right: -53px;
    top: -33px;
    width: 45px;
}

see the demo:- http://jsfiddle.net/dVbJr/11/

UPDATED

please update your css with this:-

    .arrow:after{
     -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none repeat scroll 0 0 #F4F4F4;
    border: 1px solid #999999;
    border-radius: 10px 10px 10px 10px;
    content: "";
    height: 75px;
    position: absolute;
    right: -53px;
    top: -33px;
    width: 45px;
}

now its working web-kit browsers…

for more info on pure css based shapes read this article:- http://www.css3shapes.com/