利用hover动作改变p的margin-top可以使小模块向上走，同时在小模块的屁股下面放两个沿对角线分成两种颜色的正方形，相对小模块绝对定位，便可以制造出简单的立体上扬效果。
丝带的两头和上扬的阴影部分用border实现就可以了。
不过有一个细节需要注意：
如果是导航条的话，p里放a标签，a标签里还要再放span标签；我之前也觉得多此一举，结果证明这个span是大有用处的。
因为a必须要比span高，然后overflow:hidden，才能把魔术不该露出来的部分遮住，该露出来的部分留有余地。
然后span和p:before和p:after需要设置margin-top为正，margin-top的值正好等于a比span高出来的值。
hover动作的时候再设置margin-top:0px;，屁颠屁颠往上走。
那你说，我span和p:before和p:after都不设置margin-top，hover动作的时候再设置margin-top为负，数值等于a比span高出来的值，可不可以呢？
不可以！
第一种情况，a多出来的部分是往上走的，魔术才能成功；
钻牛角尖的情况呢，a多出来的部分往下走，走光了有没有？
事实证明啊，喜欢钻牛角尖的女生最受欢迎了yeah！
html代码：
<p>     <a href="#"><span>青龙</span></a>     <a href="#"><span>白虎</span></a>     <a href="#"><span>玄武</span></a>     <a href="#"><span>朱雀</span></a> </p>
css代码：
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 transparent #ccc #ccc;     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; }
利用hover动作改变p的margin-top可以使小模块向上走，同时在小模块的屁股下面放两个沿对角线分成两种颜色的正方形，相对小模块绝对定位，便可以制造出简单的立体上扬效果。
丝带的两头和上扬的阴影部分用border实现就可以了。
不过有一个细节需要注意：
如果是导航条的话，p里放a标签，a标签里还要再放span标签；我之前也觉得多此一举，结果证明这个span是大有用处的。
因为a必须要比span高，然后overflow:hidden，才能把魔术不该露出来的部分遮住，该露出来的部分留有余地。
然后span和p:before和p:after需要设置margin-top为正，margin-top的值正好等于a比span高出来的值。
hover动作的时候再设置margin-top:0px;，屁颠屁颠往上走。
那你说，我span和p:before和p:after都不设置margin-top，hover动作的时候再设置margin-top为负，数值等于a比span高出来的值，可不可以呢？
不可以！
第一种情况，a多出来的部分是往上走的，魔术才能成功；
钻牛角尖的情况呢，a多出来的部分往下走，走光了有没有？
事实证明啊，喜欢钻牛角尖的女生最受欢迎了yeah！
html代码：
<p>     <a href="#"><span>青龙</span></a>     <a href="#"><span>白虎</span></a>     <a href="#"><span>玄武</span></a>     <a href="#"><span>朱雀</span></a> </p>
css代码：
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 transparent #ccc #ccc;     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; }
更多纯css实现丝带上扬效果 。