【技术】纯CSS写button里的正三角/倒三角

以下代码直接复制、粘贴自工作文档，只体现方法，用时需改动。

效果图:

鼠标悬浮其上时：

HTML代码：

　　　　　　<ul class="button-list cf">
                    <li><a  href="#" onclick="add()">添加</a></li>
                    <li><a  href="#">更多<b class="triangle"></b></a>
                        <ul>
                            <li><a href="">实验</a></li>
                            <li><a href="">资源</a></li>
                            <li><a href="">教学</a></li>
                            <li><a href="">金币</a></li>
                        </ul>
                    </li>
                </ul>

CSS代码：

.cf{*zoom:1;}
.cf:before,.cf:after{width:0px; height:0px; display:table;}
.cf:after{clear:both;}
.button-list{float:right;}
.button-list li{float:left; margin-right:6px; position:relative;}
.button-list li a{width:80px; line-height:36px; background:#0081c2; display:block; text-align: center; color:#fff;}
.button-list li a:hover{background:#005580;color:#fff;}
.button-list ul{position:absolute; width:80px; display:none;}
.button-list .active ul{display:block;}
.button-list li li{float:none;}
.button-list .active .triangle{width:0px; height:0px; line-height:0px; font-size:0; border-width:7px; border-style:solid dashed;}

.triangle{width:0px; height:0px; line-height:0px; font-size:0; border-width:7px; border-style:solid dashed;
    border-color: #666 transparent transparent transparent ; position:absolute; right:5px; top:15px;}

JS代码：

<script type="text/javascript">
    $(document).ready(function(e) {
        $(".button-list li").live('mouseover  mouseout',function(event){
            if(event.type=="mouseover"){
                $(this).addClass("active");
            }else if(event.type=="mouseout"){
                $(this).removeClass("active");
            }
        });
    });
</script>

 

<b>...</b>为正三角/倒三角。

padding设为0：“width:0px; height:0px; line-height:0px; font-size:0;”。

border-width的大小决定了三角的大小,

border-color决定了三角的方向:

“border-width:7px; border-style:solid dashed;    border-color: #666 transparent transparent transparent ; ”。

用“position:absolute;right:5px; top:15px;”固定在“更多”上。

active是鼠标悬停其上时显示的样式:

.button-list .active .triangle{width:0px; height:0px; line-height:0px; font-size:0; border-width:7px; border-style:solid dashed;}这样显示一个倒三角。

js用途：鼠标悬停时展开，移开时缩回。