Use css3 features to cleverly implement beautiful Div arrows

The DIV arrow is used to express the direction of the DIV content. It is a very common form of expression, such as message forwarding on Sina Weibo:

There are also ao you website navigation bar:

 

 

 

Arrows like those above your AO game account require multiple images to show the arrow and hover effect.

The traditional implementation method requires an image with an arrow to be placed above the Div. For example, the CSS of Sina Weibo is as follows:

 

With the css3 feature, we can achieve more gorgeous results without the need for images, the benefits include reducing local file system reading, saving server bandwidth and connections, and avoiding errors caused by file download failure.

The principle of implementation is: we can regard the arrow as an angle of a rectangle or a diamond, and use the CSS 3 attribute transform to rotate the rectangle.

The Up Arrow needs to rotate the rectangle 45 degrees. We use transform: Rotate (45deg) to achieve this. In addition, we need to add different hack for different browsers, for example, opera's-o-transform and Firefox's-moz-transform. The following uses the Chrome browser as an example to implement an example.

Define an arrow-shadow style with the following content:

. Arrow-shadow {

-WebKit-transform: Rotate (45deg );

Border: 1px solid # aaaaaa;

Height: 40px;

Position: absolute;

Width: 40px;

}

The implementation result is as follows:

 

To be more full, we add the box shadow of css3,

. Arrow-shadow {

-WebKit-transform: Rotate (45deg );

-WebKit-box-Shadow: 0 0 10px 0 # AAA;

Height: 40px;

Position: absolute;

Width: 40px;

}

The effect is as follows:

 

Add a div to control its height and width.

. Arrow-outer {

Height: 24px;

Overflow: hidden;

Position: absolute;

Width: 60px;

}

The effect is as follows:

 

Now we have a pretty arrow, but it is not enough. To do better, we add an internal arrow.

 

The key code and structure 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>

You can see the Arrow by adding a container to the outside.

 

The complete information is as follows:

 

Css3 and HTML5 Development and Improvement make it easier and faster to write code and achieve better results. For example, the background gradient can be directly implemented through CSS code without the tiled background image, however, sometimes some changes are required to apply these new technologies to our common functions. This requires us to think more and maintain the inspiration of thinking.