利用overflow实现导航栏中常 出现的倒三角下拉小图标

常用网页界面中，导航栏中的倒三角下拉小图标实现，可用overflow：

效果如右图：

.Triangle{position:relative;width:280px;height:15px;}
.T-son{position:absolute;height:8px;width:15px;display:inline-block;right:35px;bottom:0;overflow:hidden;}
.T-sec-son{font-size:15px;line-height:15px;position:absolute;display:inline-block;bottom:0;color:#8E8E8E;}
.pull-down{font-family:@微软雅黑;color:#D0D0D0;font-size:15px;float:right;}

 

<div class="Triangle"2         
span class="T-son"><span class="T-sec-son">◇</span></span>
         <span class="pull-down">more</span><!--描述下方的倒三角下拉小图标与“more”实现-->
4 </div>

 

 将符号◇用输入法的软键盘输入，利用overflow超出父容器部分隐藏的特性，让我们需要的下半边三角让其在父容器里面，故父元素(.T-son)高位符号的一半，宽度相同（强调：父容器的宽度也是需要设置的，否则会让其整个内容被隐藏），再让其都绝对定位，bottom:0让其都底边对其，输入的符号下部分在父容器中，上部分被隐藏，达到效果。

还需知的是：overflow起作用的前提：

                                                           1.元素为非display：inline元素---->故需要设施span标签的display类型；

                                                            2.对应方位的尺寸限制；

 

这是我界面练习时所感所想，有不足之处请多多指教，谢谢！