Skill cool-down effect with CSS borders

The above results look good. In addition to flash, there are still many ways to implement it on webpages.

Obviously, this effect is not complex. A background image, coupled with a polygon layer with transparency above, can be converted under the control of the script. But the question is, how can I build this polygon?

You can use VML in IE and canvas in other browsers. Although it works, it is not the simplest. After careful analysis, the effect is essentially composed of several triangles. Triangle, if you are familiar with css2, you must have seen it somewhere...

First, let's look at a 100*100 Div with four colored borders:

 

Of course, you cannot see anything at this time. Now we can set the Border width of the DIV to 50px:

 

What did you find? The border and border are at the right of a diagonal line. Now we set the DIV length and width to 0 and try to change the Border width of each side:

<Style>
. Demo3
{
Width: 0px;
Height: 0px;
Overflow: hidden;

Border-top: 20px red solid;
Border-Right: 30px green solid;
Border-bottom: 40px blue solid; border-left: 50px #000 solid;
}
</Style>
<Div class = "demo3"> </div>

We set the Border Width of 20 30 40 50px for the top, bottom, and left of the border respectively, then an irregular triangle is displayed. We can also set the border color to transparent to hide the specified border (only specifying a separate border in one direction will not be displayed, you must specify at least two directions for display. Therefore, you must set the direction in which the connection is not displayed to be transparent ). For example:

<Style>
. Demo4
{
Width: 0px;
Height: 0px;
Overflow: hidden;

Border-left: 50px #000 solid;
Border-top: 20px red solid;
Border-Right: 0px green solid;
Border-bottom: 0px blue solid ;;
}
</Style>
<Div class = "demo4"> </div>

However, we only need one color, so we need to set the color of the other border to transparent. It is worth noting that the border color under IE6 does not support the transparent value and is always black. Therefore, you need to use a hack for IE6 and use the chroma filter to remove the black color. (Thanks to user X on csdn! Ao_f support !)

<Style>
. Bg5
{
Background: # cc9900;
}

. Demo5
{
Width: 0px;
Height: 0px;
Overflow: hidden;

Filter: alpha (opacity = 60 );
_ Filter: chroma (color = 'black') alpha (opacity = 60 );
Opacity: 0.6;

Border-left: 50px #000 solid;
Border-top: 20px transparent solid;
Border-Right: 0px green solid;
Border-bottom: 0px blue solid ;;
}
</Style>
<Div class = "bg5">
<Div class = "demo5"> </div>
</Div>

Through this background layer, we can better see that one of the borders is set to transparent.

In this way, we only need to create several divs and splice them into corresponding polygon by setting their borders.

In fact, we can use triangles on both sides of the border to create only four mask layers. As for how to write the code, take a draft and calculate it.

Original article: http://www.cnblogs.com/index-html/archive/2011/03/11/1981670.html