提示框由两部分组成，框+箭头，箭头则利用伪元素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. UML和模式

    UML和模式应用学习笔记-2(迭代和进化式开发)   一:什么是迭代和进化式开发 1:迭代和进化式开发:通常会在还没有详细定义所有需求的情况下假设开发开始,同时使用反馈来明确和改进演化中的规格说明: ...

  2. 对中级 Linux 用户有用的 20 个命令

    也许你已经发现第一篇文章非常的有用,这篇文章是继对初级Linux用户非常有用的20个命令的一个延伸. 第一篇文章的目的是为新手准备的而这篇文章则是为了Linux的中高级用户.在这里你将学会如何进行自定 ...

  3. CVPR 2013

    CVPR2013大部分文章都已经公开了,大家可以通过下面的网址访问: http://www.cv-foundation.org/openaccess/CVPR2013.py# 还有一篇根据CVPR20 ...

  4. EF Code First、DbContext

    EF Code First.DbContext 对于之前一直使用webForm服务器控件.手写ado.net操作数据库的同学,突然来了EF和MVC,好多新概念一下泉涌而出,犹如当头一棒,的确有点不知所 ...

  5. revel框架教程之权限控制

    Go语言实战 - revel框架教程之权限控制 一个站点上面最基本都会有三种用户角色,未登录用户.已登录用户和管理员.这一次我们就来看看在revel框架下如何进行权限控制. 因为revel是MVC结构 ...

  6. C Socket初探 - 加入多线程支持，限制最大接入客户端个数

    C Socket初探 - 加入多线程支持,限制最大接入客户端个数 先上一些多线程需要使用的函数定义: DWORD WINAPI ProcessClientRequests(LPVOID lpParam ...

  7. 纯Python综合图像处理小工具（3）10种滤镜算法

    <背景>  滤镜处理是图像处理中一种非常常见的方法.比如photoshop中的滤镜效果,除了自带的滤镜,还扩展了很多第三方的滤镜效果插件,可以对图像做丰富多样的变换:很多手机app实现了实 ...

  8. 一个基于STSdb和fastJson的磁盘/内存缓存

    一个基于STSdb和fastJson的磁盘/内存缓存 需求 业务系统用的是数据库,数据量大,部分只读或相对稳定业务查询复杂,每次页面加载都要花耗不少时间(不讨论异步),觉得可以做一下高速缓存,譬如用n ...

  9. [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading

    上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...

  10. autotools入门笔记（二）——创建和使用静态库、动态库

    带有静态库或者动态库的工程的构建过程与上一节()只包含一个源文件的工程的构建过程是类似的.只是对于复杂的工程,如果包含多个还有源文件的目录时,需要对每个包含源文件的目录执行构建过程,另外创建和使用库文 ...