你的位置:首页 > 软件开发 > 网页设计 > 带箭头提示框总结实例

带箭头提示框总结实例

发布时间:2016-06-14 09:00:06
无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框。通过border属性思路:两个三角形,通过定位使两个三角形相差1px作为边框。CSS3 transfrom思路:先做一个两条边相同颜色的 ...

 带箭头提示框总结实例

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框。

  1. 通过border属性
     1 .info { 2     margin-top: 50px; 3     position:relative; 4     width:200px; 5     height:50px; 6     line-height:60px; 7     background:#F6F1B3; 8     box-shadow:1px 2px 3px #E9D985; 9     border:1px solid #DACE7C;10     border-radius:4px;11     text-align:center;12     color:red;13   }14   .nav {15     position:absolute;16     left:30px;17     overflow:hidden;18     width:0;19     height:0;20     border-width:10px;21     border-style:solid dashed dashed dashed;22   }23   .nav-border {24     top:-20px;25     border-color:transparent transparent #DACE7C transparent;26   }27   .nav-background {28     top:-19px;29     border-color:transparent transparent #F6F1B3 transparent;30   }
    带箭头提示框总结实例

     

     html:

    1 <div class="info">2   <span>提示信息</span>3   <div class="nav nav-border"></div>4   <div class="nav nav-background"></div>5 </div>
     1 .info { 2     margin-top  : 50px; 3     position   :relative; 4     width     :200px; 5     height    :50px; 6     line-height  :60px; 7     background  :#F6F1B3; 8     box-shadow  :1px 2px 3px #E9D985; 9     border    :1px solid #DACE7C;10     border-radius :4px;11     text-align  :center;12     color     :red;13   }14   .nav {15     position     :absolute;16     top        :-8px;17     left       :30px;18     overflow     :hidden;19     width       :13px;20     height      :13px;21     background    :#F6F1B3;22     border-left    :1px solid #DACE7C;23     border-top    :1px solid #DACE7C;24     -webkit-transform :rotate(45deg);25     -moz-transform  :rotate(45deg);26     -o-transform   :rotate(45deg);27     transform     :rotate(45deg);28   }
    带箭头提示框总结实例

     

    html:

    1 <div class="info">2   <span>提示信息</span>3   <div class="nav"></div>4 </div>
     1 .info { 2     margin-top: 50px; 3     position:relative; 4     width:200px; 5     height:50px; 6     line-height:60px; 7     background:#F6F1B3; 8     box-shadow:1px 2px 3px #E9D985; 9     border:1px solid #DACE7C;10     border-radius:4px;11     text-align:center;12     color:red;13   }14   .nav {15     position:absolute;16     left:30px;17     overflow:hidden;18     width:24px;19     height:24px;20     font:normal 24px "微软雅黑";21   }22   .nav-border {23     top:-17px;24     color:#DACE7C;25   }26   .nav-background {27     top:-16px;28     color:#F6F1B3;29   }
    带箭头提示框总结实例

     

    html:

    1 <div class="info">2   <span>提示信息</span>3   <div class="nav nav-border">♦</div>4   <div class="nav nav-background">♦</div>5 </div>
     1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6 <style> 7  div.container{ 8     position     :absolute;  9     top       :30px; 10     left       :40px; 11     font-size    : 9pt; 12     display     :block; 13     height      :100px; 14     width      :200px; 15     background-color :transparent; 16     *border     :1px solid #666; 17   } 18   s{ 19     position   :absolute; 20     top     :-20px; 21     *top     :-22px; 22     left     :20px; 23     display   :block; 24     height    :0; 25     width    :0; 26     font-size  : 0; 27     line-height : 0; 28     border-color :transparent transparent #666 transparent; 29     border-style :dashed dashed solid dashed; 30     border-width :10px; 31   } 32   i{33     position   :absolute; 34     top     :-9px; 35     *top     :-9px; 36     left     :-10px; 37     display   :block; 38     height    :0; 39     width    :0; 40     font-size  : 0; 41     line-height : 0; 42     border-color :transparent transparent #fff transparent; 43     border-style :dashed dashed solid dashed; 44     border-width :10px; 45   } 46   .content{ 47     border        :1px solid #666; 48     -moz-border-radius  :3px; 49     -webkit-border-radius :3px; 50     position       :absolute; 51     background-color   :#fff; 52     width         :100%; 53     height        :100%; 54     padding        :5px; 55     *top         :-2px; 56     *border-top      :1px solid #666; 57     *border-top      :1px solid #666; 58     *border-left     :none; 59     *border-right     :none; 60     *height        :102px; 61     box-shadow      : 3px 3px 4px #999; 62     -moz-box-shadow    : 3px 3px 4px #999; 63     -webkit-box-shadow  : 3px 3px 4px #999; 64     /* For IE 5.5 - 7 */65     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); 66     /* For IE 8 */ 67     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 68   }69 </style>70 </head>71 <body>72 <div class="container">73     <div class="content">74       hello world!75     </div>76     <s>77       <i></i>78     </s>79 </div>80 </body>81 </html>
    带箭头提示框总结实例

     

    效果图:

    带箭头提示框总结实例

    小结: 

      带箭头的提示框给用户的交互带来很好的效果,本文介绍了三个方法,如果你还有其他方法可以@me,我会非常感激。希望本文能够对你有些帮助。

    原标题:带箭头提示框总结实例

    关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录