Clever use of CSS3 features to achieve beautiful div arrows

div arrows are used to represent the direction of Div content, which is a very common form of expression, such as the message forwarding of Sina Weibo:

There are also the navigation bar of the website of the Proud tour:

Like a trip to the account, the arrows need more than one picture to show the effect of arrows and hover.

The traditional way of implementation requires a pair of arrows to put the picture above the div to achieve, such as Sina Weibo related CSS as follows:

With the CSS3 feature, we do not need pictures to achieve a more gorgeous effect, the benefits include reducing the local file system read, save server bandwidth and connections, avoid file download failure caused by errors and so on.

The principle of implementation is that we can consider an arrow as a rectangle or a corner of a diamond, using the CSS3 property transform to rotate the rectangle.

The upward arrow needs to rotate the rectangle 45 degrees, we use Transform:rotate (45deg) to achieve, in addition to different browsers also need to add different hack, such as opera's-o-transform, For Firefox's-moz-transform, here's a sample example for Chrome browser.

Define a Arrow-shadow style that reads as follows:

. Arrow-shadow {

-webkit-transform:rotate (45DEG);

border:1px solid #AAAAAA;

height:40px;

Position:absolute;

width:40px;

}

The effect of the implementation is as follows:

In order to be fuller, we add CSS3 's box shadow,

. Arrow-shadow {

-webkit-transform:rotate (45DEG);

-webkit-box-shadow:0 0 10px 0 #aaa;

height:40px;

Position:absolute;

width:40px;

}

Now the effect is as follows:

Add a div to the outside to control its height and width.

. arrow-outer {

height:24px;

Overflow:hidden;

Position:absolute;

width:60px;

}

The effect is as follows:

Now that we've got a nice arrow, but that's not enough, let's add an inner arrow for a better performance.

The key codes and structures are as follows:

<style type= "Text/css" >

. arrow-outer {

Position:absolute;

height:24px;

width:60px;

Overflow:hidden;

}

. Arrow-shadow {

-webkit-box-shadow:0 0 10px 0 #AAAAAA;

-webkit-transform:rotate (45DEG);

Background:none Repeat scroll 0 0 #FFFFFF;

height:40px;

left:15px;

Position:absolute;

top:16px;

width:40px;

}

. arrow-inner {

position:relative;

left:10px;

top:20px;

height:40px;

width:40px;

Background: #fff;

border:5px solid #ededed;

-webkit-transform:rotate (45DEG);

Transform:rotate (45DEG);

}

</style>

<div class= "Arrow-outer" >

<div class= "Arrow-shadow" >

</div>

</div>

<div class= "Arrow-inner" >

</div>

Add a layer of containers outside and you'll see the arrows.

The final complete is as follows:

CSS3, HTML5 development and Perfection Let us write code more simple and fast, the implementation of the effect is more beautiful, such as the background of the gradient no longer need to tile the background image can be directly implemented through CSS code, but sometimes need to undergo some transformation, in order to apply these new technologies to our common functions, This requires us to think more and to keep our minds inspired.

Clever use of CSS3 features to achieve beautiful div arrows