带箭头提示框总结及实例_html/css_WEB-ITnose

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

通过border属性
思路：两个三角形，通过定位使两个三角形相差1px作为边框。 CSS3 transfrom
思路：先做一个两条边相同颜色的正方形，然后旋转一定角度就是三角形了 特殊字符'♦'
思路：特殊字符漏出上半部分，看上去就像三角形了 一、通过border属性：

我们先做一个宽和高都是10px的div，边框也是10px，

1 width: 10px;2 height: 10px;3 border: 10px solid;4 border-color: red green yellow blue;  

如下图：

图中间空白是我们设置的宽和高，如果设置为0px，会出现什么情况呢？，如下图：

这时候我们就可以通过设置它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色，就出来我们想要的三角形了。如下图：

现在我们来实现第一幅图上的效果：

css：

 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 
2      提示信息 3     


      
查看更多关于带箭头提示框总结及实例_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112135