杰晶网络

三种带箭头提示框总结实例
网络编程 2024/11/13 佚名
3 2

三种带箭头提示框总结实例

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

1.通过border属性

思路：两个三角形，通过定位使两个三角形相差1px作为边框。

2.CSS3 transfrom

思路：先做一个两条边相同颜色的正方形，然后旋转一定角度就是三角形了

3.特殊字符'"color: #ff0000">一、通过border属性：

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

 width: 10px;
 height: 10px;
 border: 10px solid;
border-color: red green yellow blue;

如下图：

三种带箭头提示框总结实例

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

三种带箭头提示框总结实例

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

三种带箭头提示框总结实例

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

css：

.info {
   margin-top: 50px;
  position:relative;
  width:200px;
  height:50px;
   line-height:60px;
  background:#F6F1B3;
  box-shadow:1px 2px 3px #E9D985;
  border:1px solid #DACE7C;
  border-radius:4px;
  text-align:center;
  color:red;
  }
 .nav {
   position:absolute;
  left:30px;
   overflow:hidden;
  width:0;
  height:0;
   border-width:10px;
  border-style:solid dashed dashed dashed;
 }
  .nav-border {
   top:-20px;
  border-color:transparent transparent #DACE7C transparent;
 }
 .nav-background {
  top:-19px;
  border-color:transparent transparent #F6F1B3 transparent;
 }

html：

<div class="info">
  <span>提示信息</span>
  <div class="nav nav-border"></div>
  <div class="nav nav-background"></div>
 </div>

二、CSS3 transfrom

我们首先制作一个两条相邻的边框颜色相同，其他两条边边框为0px的div方框。如图：

三种带箭头提示框总结实例

在将方框旋转45度就可以实现三角提示效果了。

css：

.info {
   margin-top : 50px;
   position  :relative;
   width   :200px;
   height  :50px;
   line-height :60px;
   background :#F6F1B3;
   box-shadow :1px 2px 3px #E9D985;
   border  :1px solid #DACE7C;
   border-radius :4px;
   text-align :center;
   color   :red;
  }
  .nav {
   position   :absolute;
   top    :-8px;
   left    :30px;
   overflow   :hidden;
   width    :13px;
   height   :13px;
   background  :#F6F1B3;
   border-left  :1px solid #DACE7C;
  border-top  :1px solid #DACE7C;
  -webkit-transform :rotate(45deg);
  -moz-transform :rotate(45deg);
  -o-transform  :rotate(45deg);
   transform   :rotate(45deg);
  }

html：

 <div class="info">
  <span>提示信息</span>
  <div class="nav"></div>
 </div>

三、特殊字符'"htmlcode"> 

 .info {
   margin-top: 50px;
   position:relative;
   width:200px;
   height:50px;
   line-height:60px;
   background:#F6F1B3;
   box-shadow:1px 2px 3px #E9D985;
   border:1px solid #DACE7C;
   border-radius:4px;
   text-align:center;
   color:red;
 }
  .nav {
   position:absolute;
   left:30px;
   overflow:hidden;
  width:24px;
  height:24px;
   font:normal 24px "微软雅黑";
  }
  .nav-border {
  top:-17px;
   color:#DACE7C;
  }
  .nav-background {
   top:-16px;
   color:#F6F1B3;
  }

html：

<div class="info">
  <span>提示信息</span>
  <div class="nav nav-border">"nav nav-background">"htmlcode">



 <!DOCTYPE html>
 <html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
 div.container{
   position   :absolute; 
   top    :30px; 
   left    :40px; 
   font-size  : 9pt; 
   display   :block; 
   height   :100px; 
   width   :200px; 
   background-color :transparent; 
   *border   :1px solid #666; 
  } 
 s{ 
   position  :absolute; 
   top   :-20px; 
   *top   :-22px; 
  left   :20px; 
   display  :block; 
  height  :0; 
  width  :0; 
  font-size : 0; 
   line-height : 0; 
   border-color :transparent transparent #666 transparent; 
   border-style :dashed dashed solid dashed; 
   border-width :10px; 
  } 
 i{
   position  :absolute; 
  top   :-9px; 
   *top   :-9px; 
  left   :-10px; 
  display  :block; 
   height  :0; 
   width  :0; 
   font-size : 0; 
   line-height : 0; 
   border-color :transparent transparent #fff transparent; 
   border-style :dashed dashed solid dashed; 
   border-width :10px; 
  } 
  .content{ 
   border    :1px solid #666; 
  -moz-border-radius :3px; 
   -webkit-border-radius :3px; 
   position    :absolute; 
   background-color  :#fff; 
   width     :100%; 
   height    :100%; 
  padding    :5px; 
   *top     :-2px; 
   *border-top   :1px solid #666; 
   *border-top   :1px solid #666; 
   *border-left   :none; 
  *border-right   :none; 
   *height    :102px; 
   box-shadow   : 3px 3px 4px #999; 
   -moz-box-shadow  : 3px 3px 4px #999; 
   -webkit-box-shadow : 3px 3px 4px #999; 
   /* For IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999'); 
  /* For IE 8 */ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 
  }
 </style>
 </head>
 <body>
 <div class="container">
   <div class="content">
   hello world!
  </div>
  <s>
    <i></i>
  </s>
 </div>
 </body>
 </html>





效果图：


三种带箭头提示框总结实例


小结：


　　带箭头的提示框给用户的交互带来很好的效果，本文介绍了三个方法，如果你还有其他方法可以@me，我会非常感激。希望本文能够对你有些帮助。
标签：
带箭头提示框
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“三种带箭头提示框总结实例”
暂无“三种带箭头提示框总结实例”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网