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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .demo{
            width: 200px;
            height: 60px;
            background-color: #09f;
            border:4px solid #ccc;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">.demo:before,.demo:after{
            position: absolute;
            width: 0;
            height: 0;
            content: '';
            border:10px solid transparent;
            bottom: 100%;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

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

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

下面是外部箭头的写法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .demo:before{
            border-bottom-color: #ccc;
            border-width: 16px;
            left: 50%;
            margin-left: -16px;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .demo:after{
            border-bottom-color: #09f;
            border-width: 10px;
            left: 50%;
            margin-left: -10px;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

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

下面是全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .demo{
            width: 200px;
            height: 60px;
            background-color: #f56;
            border:4px solid #ccc;
            position: relative;
        }
        .demo:before,.demo:after{
            position: absolute;
            width: 0;
            height: 0;
            content: '';
            border:10px solid transparent;
            bottom: 100%;
        }
        .demo:before{
            border-bottom-color: #ccc;
            border-width: 16px;
            left: 50%;
            margin-left: -16px;
        }
        .demo:after{
            border-bottom-color: #f56;
            border-width: 10px;
            left: 50%;
            margin-left: -10px;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</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. session验证登陆- 页面跳转

    用session验证登陆,当用户想访问一个页面时由于没有登录,就跳转到登录页面,登录后跳转到用户请求的页面,在session跳转中传上次请求的页面.  怎么获得这个url值并跳转到该页面呢? 以此跳转 ...

  2. 红黑树LLRB

    LLRB——红黑树的现代实现 一.本文内容 以一种简明易懂的方式介绍红黑树背后的逻辑实现2-3-4树,以及红黑树的插入.删除操作,重点在2-3-4树与红黑树的对应关系上,并理清红黑树相关操作的来龙去脉 ...

  3. Cracking the Coding Interview（Stacks and Queues）

    Cracking the Coding Interview(Stacks and Queues) 1.Describe how you could use a single array to impl ...

  4. 前端基于easyui的mvc扩展(续)

    前端基于easyui的mvc扩展(续) 回顾及遗留问题 上一篇讲解了基于easyui的mvc扩展的基本实现,已经降低了在mvc内使用easyui的难度,但是仍然还有一些问题: 当我们要给生成的控件设置 ...

  5. Mocking framework

    [译] 什么是Mocking framework?它有什么用? 原位地址:http://codetunnel.com/blog/post/what-is-a-mocking-framework-why ...

  6. 先对数组排序，在进行折半查找（C++）

    第一步:输入15个整数 第二步:对这15个数进行排序 第三部:输入一个数,在后在排好序的数中进行折半查找,判断该数的位置 实现代码如下: 方法一: 选择排序法+循环折半查找法 #include< ...

  7. 使用Maven管理依赖JAR文件，自定义项目布局，利用ANT生成不同的发布包

    <?xml version="1.0" encoding="GB2312"?> <project name="CardInfo-We ...

  8. 异常:failed for object com.sdu.crm.pojo.Customer@136a986 [java.lang.NullPointerException]

    异常: failed for object com.sdu.crm.pojo.Customer@136a986 [java.lang.NullPointerException] 大家好,如果大家看到了 ...

  9. 生成UUID简易版

    最近一体化项目的主键ID都要求使用UUID,生成方法如下:   import org.safehaus.uuid.UUIDGenerator;   /** UUID生成器对象 */  private ...

  10. PHP中file_exists与is_file、is_dir的区别，以及执行效率的比较 转自#冰雪傲骨#

    PHP中file_exists与is_file.is_dir的区别,以及执行效率的比较   判断文件是否存在,有2个常用的PHP函数:is_file 和 file_exists, 判断文件夹是否存在, ...