Using CSS3 to simulate the return button in the iphone

It seems a bit late to write this, iOS has evolved from the time of materialization to the flattened era, those rounded corners + gradient + shadow of the past, but still go to the old iOS back button.

In the past years, we have to iOS design elements for their own mobile version of the design elements of the page, which is naturally not the classic return button, looking at a seemingly very simple return button, but there is no way to write in code like, The annoying triangle arrow can only let the front-end engineers helpless use a picture to stitching (such as Taobao, Cat, Baidu, the United States are pictures of the way), or not the button (such as Yahoo, Google, Facebook does not need); Of course, I also believe that Daniel has a good deal, but not like me to come out of the.

Well, not much to say the useless, to say my solution:

First look at the design draft (hehe, take our company to say)

1, to determine the structure of HTML, with a label plus pseudo class is not really, so I used two nested tags

Home

2, the first thought is a standard button on the right, this comparison seconds kill it, so not much said, above the figure and Code

CSS code copy content to clipboard

. btn-back span {

Display:inline-block;

font-size:13px;

line-height:27px;

height:27px;

Padding:0 10px;

Background:-webkit-linear-gradient (top, #5bbfd8, #449fb6);

Background:-moz-linear-gradient (top, #5bbfd8, #449fb6);

border:1px solid #2c96b2;

border-radius:5px;

text-shadow:0 -1px 0 rgba (0, 0, 0,. 4);

}

3, the left is a triangular type, but the triangle through the border do not, fortunately, CSS is just rotation and deformation, make a square rotation almost can be achieved

Here we need to use the lower right angle isosceles triangle type of formula (long edge = Short edge * square root 2), it is estimated that many people do not remember it:

Because our square needs to rotate 45 °, so in fact we need to seek that short edge, the left side of the square type of width is short length; 27/1.4142≈19.09, take the integer 19

Actually draw a square after doing a few steps to deal with:

1) Tilt the gradient -45°

2) The deformation basis is set to 0,0

3 Rotate the square to 45°

4) Compression of the square x-axis

CSS code copy content to clipboard

/* Here is a pseudo class: before*/

. btn-back:before {

margin:50px;

Content: ';

Display:inline-block;

width:18px;

height:18px;

Background:-webkit-linear-gradient ( -45deg, #6eb7c9, #449fb6);/* Background rotation -45°*/

Background:-moz-linear-gradient ( -45deg, #6eb7c9, #449fb6);

border:1px solid #2c96b2;

-webkit-transform-origin:0 0;/* Set base point to 0,0*/

-moz-transform-origin:0 0;

-webkit-transform:scalex (0.8) rotate (45deg);/*x axis compression, rotate 45; The following properties will be executed first °*/

-moz-transform:scalex (0.8) rotate (45deg);

}

4, feel almost, merge; then decorate.

There are a few steps to decorating it.

1 The left Triangle is absolutely positioned

2 Remove the left border of the button to adjust the left two rounded corners, and set to relative positioning, Z-index set to 2, so you can cover the right half of the small triangle

3 to the left of the small triangle with rounded corners (because the fillet will reduce the height, so you may need to fine-tune the height)

CSS code copy content to clipboard

. btn-back {

FONT:14PX/27PX Arial,helvetica,sans-serif;

Color: #fff;

Text-decoration:none;

position:relative;

Display:block;

margin-top:11px;

}

/* Button Body * *

. btn-back span {

Display:inline-block;

font-size:13px;

line-height:27px;

height:27px;

padding:0 10px 0 5px;

Background:-moz-linear-gradient (top, #5bbfd8, #449fb6);

Background:-webkit-linear-gradient (top, #5bbfd8, #449fb6);

border:1px solid #2c96b2;

border-left:0;

border-radius:2px 5px 5px 2px;

text-shadow:0 -1px 0 rgba (0, 0, 0,. 4);

margin-left:12px;

position:relative;

Z-index:2;

}

* * The small triangle on the left/

. btn-back:before {

Content: ';

Display:inline-block;

width:20px;

height:20px;

Background:-moz-linear-gradient ( -45deg, #5bbfd8, #449fb6);/* Background rotation -45°*/

Background:-webkit-linear-gradient ( -45deg, #5bbfd8, #449fb6);

border:1px solid #2c96b2;

-webkit-transform-origin:0 0;/* Set base point to 0,0*/

-moz-transform-origin:0 0;

-webkit-transform:scalex (0.8) rotate (45deg);/*x axial compression, rotating 45°*/

-moz-transform:scalex (0.8) rotate (45deg);

BORDER-RADIUS:3PX 2px;

Position:absolute;

left:13px;

Top: -1px;

}

5, finally give a finished product

This can only be said to achieve an imperfect return button, because some shadow effect is more difficult to handle. But I think it is a good alternative, always better than the picture of a few K (small size, no additional requests)

(Prompts for browser access to support HTML5+CSS3 to see the effect)