提示框由两部分组成，框+箭头，箭头则利用伪元素before、after写成。

根据提示框的样式可以看出，上面的箭头由两部分组成：灰色大箭头+蓝色小箭头，蓝色嵌套在灰色里面，于是箭头就有了边框，整体搭配起来也比较好看。

那么这部分是怎么写的呢？

首先把箭头以外的部分写出来，下面是html代码以及它的css样式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .demo{
  8.             width: 200px;
  9.             height: 60px;
  10.             background-color: #09f;
  11.             border:4px solid #ccc;
  12.             position: relative;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="demo"></div>
  18. </body>
  19. </html>

显然我们还要用before、after为它加上箭头，这样才能起到提示作用，我们先来写外部箭头和内部箭头公共部分：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">.demo:before,.demo:after{
  7.             position: absolute;
  8.             width: 0;
  9.             height: 0;
  10.             content: '';
  11.             border:10px solid transparent;
  12.             bottom: 100%;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div class="demo"></div>
  18. </body>
  19. </html>

由于这是一个箭头向上的提示框，所以箭头紧贴着上边框，于是就有了bottom:100%的设置；同理，箭头向下，top：100%；箭头向右，left:100%；箭头向左，right：100%；

我们这里用before写外部箭头，after写内部箭头

下面是外部箭头的写法：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .demo:before{
  8.             border-bottom-color: #ccc;
  9.             border-width: 16px;
  10.             left: 50%;
  11.             margin-left: -16px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="demo"></div>
  17. </body>
  18. </html>

现在呈现在页面上的效果是这样的：

没问题，下面把内部箭头写出来

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     .demo:after{
  8.             border-bottom-color: #09f;
  9.             border-width: 10px;
  10.             left: 50%;
  11.             margin-left: -10px;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="demo"></div>
  17. </body>
  18. </html>

完成，最终效果就是这样了

下面是全部代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .demo{
  8.             width: 200px;
  9.             height: 60px;
  10.             background-color: #f56;
  11.             border:4px solid #ccc;
  12.             position: relative;
  13.         }
  14.         .demo:before,.demo:after{
  15.             position: absolute;
  16.             width: 0;
  17.             height: 0;
  18.             content: '';
  19.             border:10px solid transparent;
  20.             bottom: 100%;
  21.         }
  22.         .demo:before{
  23.             border-bottom-color: #ccc;
  24.             border-width: 16px;
  25.             left: 50%;
  26.             margin-left: -16px;
  27.         }
  28.         .demo:after{
  29.             border-bottom-color: #f56;
  30.             border-width: 10px;
  31.             left: 50%;
  32.             margin-left: -10px;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="demo"></div>
  38. </body>
  39. </html>

这是一个箭头向上的提示框，只要修改一下，箭头想朝哪朝那，老方便了似不似<(￣︶￣)>

利用before、after制作提示框的更多相关文章

  1. 利用react来制作评论框

    学习地址:https://my.oschina.net/leogao0816/blog/379488

  2. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  3. Qt之透明提示框

    简述 经常使用企鹅的小伙伴一定对登录失败的提示框很熟悉,主要涉及窗口透明并添加图标.提示信息.关闭按钮的显示等. 我们可以利用QWidget创建一个提示框,然后通过样式设置我们想要的效果. 简述 效果 ...

  4. 【 D3.js 高级系列 — 9.0 】 交互式提示框

    一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...

  5. Bootstrap_Javascript_提示框

    一. 结构分析 在Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都有一个 ...

  6. Bootstrap提示框

    前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是 ...

  7. [转]Angular——提示框

    本文转自:https://blog.csdn.net/whm18322394724/article/details/80177950 版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...

  8. 【Unity笔记】提示框ToolTips大小自适应，及其闪烁的问题

    需求:制作了一个提示框,当鼠标移入背包格子内,显示提示框,且提示框位置跟随鼠标移动.当鼠标移出背包格子,隐藏提示框. 制作提示框ToolTips 因为提示框的大小要求随着显示的文本内容长度而自动大小适 ...

  9. 提示框，对话框，路由跳转页面，跑马灯，幻灯片及list组件的应用

    目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...

随机推荐

  1. GNU 项目(开源社区的由来，背后的哲学)

    转自译言网:http://article.yeeyan.org/view/88497/59257/ 第一个软件共享社区 当我在1971年开始在麻省理工人工智能实验室工作时, 我成为一个已经存在多年的软 ...

  2. C# 根据时间创建文件夹

    string file = ((fileNameIndex)index).ToString(); if (!Directory.Exists(HttpContext.Current.Server.Ma ...

  3. Easyui表单验证扩展

    简介: 使用Easyui,我们省了好多事情,不用为UI费心,只需要关注业务层面即可,下面是一些常用的验证方面的扩展,收藏下自己用 //重载$.fn.validatebox.defaults.rules ...

  4. ASP.NET MVC3开发-数据库篇之CodeFisrt开发（一）

    本文讲述了在ASP.NET MVC3开发中M层使用Code Fisrt如何进行开发,由于作者对ASP.NET MVC3的学习不是很深,所以写的都是些基本的内容(写的如有不正确的地方请评论指正),适合初 ...

  5. speedbar , tabbar 还有linum-mode

    我的Emacs折腾经验谈(三) speedbar , tabbar 还有linum-mode 离上一篇博客已经很遥远了,最近总是各种逛,但没有心思静下来写点东西,这回写一下我之前用的一些东西. Spe ...

  6. WP中一些耗时的东西

    MediaPlayer.GameHasControl 耗时1.5ms MediaPlayer.State 耗时0.4ms 上面两个原本放在游戏的update中,后来注释掉发现其它的游戏逻辑只要0.2m ...

  7. 百度地图定位SDK 之构想

    百度地图定位 前提 从香港旅游回来,心中油然升起一股热血滂湃,激励自己发现市场需求,向创业奋进,朝着梦想前进. 简介 百度Android定位SDK支持Android1.5以及以上设备,提供: 定位功能 ...

  8. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  9. SSH的整合

    SSH的整合 struts2和hibernate的配置我这里就不多说了,先把两个有关的东西说下.一个是所有的包.struts2+hibernate3+spring2.5我包准备放上去给大家下载. ht ...

  10. flowplayer视频播放插件

    flowplayer视频播放插件 最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. f ...