提示框由两部分组成，框+箭头，箭头则利用伪元素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. [RM 状态机详解2] RMAppAttempt状态机详解

    摘要 本文详细描述RMAppAttempt状态机内的状态与其转换关系,分析的代码基于Apache社区Hadoop最新的2.3.0版本. RMAppAttempt状态机 在RM中,一个RMApp可能对于 ...

  2. vs2015开发Windows服务

    工作已经很久,时隔这么长时间写这篇文章是给自己以后做参考.也不至于以后长时间不写Windows服务而忘记整个开发过程.windows服务开发,基础的就不说了,直接上过程. 1.新建windows服务项 ...

  3. CodeForces Round

    CodeForces Round 199 Div2   完了,这次做扯了,做的时候有点发烧,居然只做出来一道题,差点被绿. My submissions     # When Who Problem ...

  4. 广告频次控制（frequency capping）

    频次控制介绍 广告中的频次控制是指控制一个用户最多在指定时间内看到一个广告(或相似广告)的次数,比如广告主可以限制一个用户最多只能一天看到一个广告3次(频次控制也可以让publisher来指定,但本文 ...

  5. 使用C++做算法时，对内存的管理的办法

    使用C++做算法时,对内存的管理的办法 最近老是在想C++的内存控制机制,查了一些资料所以有点想法,自己记录一下免得以后自己忘了. 1. 需求 在做线性代数的算法时,首要的就实现Matrix这个类.由 ...

  6. Entity Framework实体模型 入门视频教程

    Entity Framework实体模型 入门视频教程 恢复内容开始--- 第一步 创建一个 控制台应用程序 第二步 创建一个ADO.NET 数据实体模型 DbModel.edmx 需要跟数据库进行连 ...

  7. 半同步半异步模式的实现 - MSMQ实现

    半同步半异步模式的实现 - MSMQ实现 所谓半同步半异步是指,在某个方法调用中,有些代码行是同步执行方式,有些代码行是异步执行方式,下面我们来举个例子,还是以经典的PlaceOrder来说,哈哈. ...

  8. 在使用simplexml_load_file()函数读取xml文件时遇到<![CDATA[]]>，怎么让其进行解析

    simplexml_load_file ( '1394.xml', 'SimpleXMLElement', LIBXML_NOCDATA ); 使用这个函数里面的这两个参数

  9. Arduino 各种模块篇 摇杆模块

    Arduino的另外几种模块,我们常见的joystick摇杆模块. 用起来很爽,摇杆 有X,Y轴可调 这里有一篇非常想尽的示例代码: http://www.geek-workshop.com/foru ...

  10. 初识B/S结构编程技术

    B/S结构编程语言 ASP(Active Server Page 动态服务器页面)技术 微软早期推出的B/S编程技术,出现在JSP和ASP.NET之前,PHP当时也很不稳定.ASP之前,动态网站使用G ...