Using CSS3 to make a simple chrome simulator

Are the use of some basic CSS3 and are not complicated. You are interested in trying to write one too.

The only complex place is the simulation of the browser tag.

As you can see, the basic features of the chrome tag are as follows:

Trapezoidal

With rounded corners

Width Adaptive

It can be easily done with pictures, but how can you use pictures? As a front end of the pursuit, it must be achieved with pure CSS3 Ah!

The HTML for the tag is simple:

xml/html code to copy content to clipboard

　　

　　

• New Label page

　　

• Baidu a bit, you will know

　　

• New Label page

　　

Trapezoidal ends with: Before and: After easy to handle.

CSS code copy content to clipboard

. Tabs Li:before,

. Tabs Li:after {

width:16px;

height:24px;

Content: "";

border:1px solid #3b5c95;

}

Attention should be paid to the z-index relationship between elements when dealing with positioning.

CSS code copy content to clipboard

. tabs Li {

Display:inline-block;

position:relative;

z-index:0;

}

. Tabs Li:before,

. Tabs Li:after {

Position:absolute;

Z-index:3;

}

. Tabs Li:before {

Left: -12px;

}

. Tabs Li:after {

Rightright: -12px;

}

The deformation uses the CSS3 transform.

CSS code copy content to clipboard

. Tabs Li:before {

-o-transform:skew ( -22DEG);

-ms-transform:skew ( -22DEG);

-moz-transform:skew ( -22DEG);

-webkit-transform:skew ( -22DEG);

Transform:skew ( -22DEG);

}

. Tabs Li:after {

-o-transform:skew (22DEG);

-ms-transform:skew (22DEG);

-moz-transform:skew (22DEG);

-webkit-transform:skew (22DEG);

Transform:skew (22DEG);

}

Well, it's almost done. The next step is to adjust the gradient, the height, width, and position of the Chrome browser with a little bit of tweaking.