Pure CSS to achieve ribbon rally effect

Use hoverMovement change pOf margin-topCan make the small module up, while in the bottom of the small module two diagonally divided into two colors of the square, relative to the small module absolute positioning, you can create a simple three-dimensional upward effect.
The ends of the ribbon and the rising shadow part borderThe realization is possible.

But there is one detail to note:
If it is a navigation bar, put the label, label, and then put the label, p a a span I also thought superfluous, the results prove that this span is very useful.
Because a it must be span higher, then overflow:hidden , to the magic should not be exposed to the part of the cover, the exposed part of the leeway.
Then span and p:before and p:after need to be set margin-top to positive, margin-top the value is exactly equal to the a span higher out value.
hoverWhen the action is set margin-top:0px; , the fart will go up.
Then you say, I span p:before p:after do not set, and margin-top hover the action is set margin-top to negative, the value is equal to a span the higher values, can it?
No!

The first situation, the a more out of the part is to go up, magic to succeed;
The situation of the dead, the a more out of the part of the go down, have gone?
It turns out that girls who like to be in the yeah! are the most popular.

HTML code:

<p>    <a href= "#" ><span> Tsing Lung </span></a>    <a href= "#" ><span> White tiger </ span></a>    <a href= "#" ><span> Xuanwu </span></a>    <a href= "#" ><span > Rose Finch </span></a></p>

CSS code:

p{width:500px; margin:200px auto 0px;}    p:before{content: "";    BORDER:25PX solid;    Border-color: #ccc #ccc #ccc Transparent;    margin-top:10px; Float:left;}    p:after{content: "";    BORDER:25PX solid;    Border-color: #ccc #ccc of #ccc transparent;    margin-top:10px; Float:left;}    P span{Display:inline-block;    width:100px;    line-height:50px;    margin-top:10px;    Text-align:center;    Background: #ccc;    position:relative; Transition:background-color 0.5s, Margin-top 0.3s;}    P a{color: #000;    Text-decoration:none;    height:60px;    Overflow:hidden; Float:left;}    P span:before{content: "";    border-right:10px solid #000;    border-bottom:10px solid #ccc;    Position:absolute;    top:50px; left:0px;}    P span:after{content: "";    border-left:10px solid #000;    border-bottom:10px solid #ccc;    Position:absolute;    top:50px; right:0px;}    P a:hover span{margin-top:0px; Background: #0cf;} 

hoverthe use of motion changes p margin-top can make the small module up, at the same time in the small module of the bottom of the two diagonally divided into two colors of the square, relative to the small module absolute positioning, you can create a simple three-dimensional upward effect.
The two ends of the ribbon and the rising shadow part are used border to achieve it.

But there is one detail to note:
If it is a navigation bar, put the label, label, and then put the label, p a a span I also thought superfluous, the results prove that this span is very useful.
Because a it must be span higher, then overflow:hidden , to the magic should not be exposed to the part of the cover, the exposed part of the leeway.
Then span and p:before and p:after need to be set margin-top to positive, margin-top the value is exactly equal to the a span higher out value.
hoverWhen the action is set margin-top:0px; , the fart will go up.
Then you say, I span p:before p:after do not set, and margin-top hover the action is set margin-top to negative, the value is equal to a span the higher values, can it?
No!

The first situation, the a more out of the part is to go up, magic to succeed;
The situation of the dead, the a more out of the part of the go down, have gone?
It turns out that girls who like to be in the yeah! are the most popular.

HTML code:

<p>    <a href= "#" ><span> Tsing Lung </span></a>    <a href= "#" ><span> White tiger </ span></a>    <a href= "#" ><span> Xuanwu </span></a>    <a href= "#" ><span > Rose Finch </span></a></p>

CSS code:

p{width:500px; margin:200px auto 0px;}    p:before{content: "";    BORDER:25PX solid;    Border-color: #ccc #ccc #ccc Transparent;    margin-top:10px; Float:left;}    p:after{content: "";    BORDER:25PX solid;    Border-color: #ccc #ccc of #ccc transparent;    margin-top:10px; Float:left;}    P span{Display:inline-block;    width:100px;    line-height:50px;    margin-top:10px;    Text-align:center;    Background: #ccc;    position:relative; Transition:background-color 0.5s, Margin-top 0.3s;}    P a{color: #000;    Text-decoration:none;    height:60px;    Overflow:hidden; Float:left;}    P span:before{content: "";    border-right:10px solid #000;    border-bottom:10px solid #ccc;    Position:absolute;    top:50px; left:0px;}    P span:after{content: "";    border-left:10px solid #000;    border-bottom:10px solid #ccc;    Position:absolute;    top:50px; right:0px;}    P a:hover span{margin-top:0px; Background: #0cf;}