本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状！

首先介绍一下CSS：after选择器

定义和用法：(参考w3school:after选择器)

　　：after选择器在被选元素的内容后面插入内容，使用content属性来指定要插入的内容

例：

  1. p:after
  2. {
  3.     content:"台词：-";
  4.     background-color:yellow;
  5.     color:red;
  6.     font-weight:bold;
  7. }

具体大家可以参考：w3school！

下面来介绍用:after选择器来制作CSS箭头等提示框：（这里将一步一步简单的设计，每一步添加的内容就是与前一步多出来的style代码内容，注意区别！）
首先，我们的HTML代码：

  1. <body>
  2.     <div class="demo"></div>
  3. </body>

让我们来设置该盒子的样式：

  1. <style>
  2.     .demo{
  3.         background-color: lightgreen;
  4.         height: 100px;
  5.         position: relative;
  6.         width: 100px;
  7.     }
  8. </style>

截图：

这里需注意我们设置position属性为relative，是为了允许我们设置我们的“箭头”（还没有出现）绝对定位并且保持它和我们的盒子有联系！

接着我们继续插入“箭头”（还没有出现）基本样式：

  1. <style>
  2.     .demo{
  3.         background-color: lightgreen;
  4.         height: 100px;
  5.         position: relative;
  6.         width: 100px;
  7.     }
  8.     .demo:after{
  9.         content:'';
  10.         position:absolute;
  11.         height:20px;
  12.         width:20px;
  13.         background:yellow;
  14.     }
  15. </style>

截图：

你将会注意到一些事，一、我们仅仅插入了一个黄色的方块，那个就是我们将要设计成箭头的方块；二、我们设置绝对定位absolute以至于我们可以将它移动到我们想要的位置上！

继续，这儿给黄色方块（即“箭头”前身）设置边框，这儿的边框就是箭头的实体，并且去掉黄色方块的内容（通过设置.demo:after中的样式“height:0;width:0”去掉黄色方块，这里我们省略了黄色方块的height、width）：

  1. <style>
  2.     .demo{
  3.         background-color: lightgreen;
  4.         height: 100px;
  5.         position: relative;
  6.         width: 100px;
  7.     }
  8.     .demo:after{
  9.         content:'';
  10.         position:absolute;
  11.         //height:20px;
  12.         //width:20px;
  13.         background:yellow;
  14.  
  15.         border:10px solid gray;
  16.     }
  17. </style>

截图：

现在再将灰色边框方块设计成箭头形式：

  1. <style>
  2.     .demo{
  3.         background-color: lightgreen;
  4.         height: 100px;
  5.         position: relative;
  6.         width: 100px;
  7.     }
  8.     .demo:after{
  9.         content:'';
  10.         position:absolute;
  11.         //height:20px;
  12.         //width:20px;
  13.         //background:yellow;
  14.  
  15.         //border:10px solid gray;
  16.         border:10px solid transparent;
  17.         border-top-color:gray
  18.     }
  19. </style>

截图：

OK！我们可以看到箭头成形！

下面来设置它的位置为我们想要的（此例箭头移动至下端）：

  1. <style>
  2.     .demo{
  3.         background-color: lightgreen;
  4.         height: 100px;
  5.         position: relative;
  6.         width: 100px;
  7.     }
  8.     .demo:after{
  9.         content:'';
  10.         position:absolute;
  11.         //height:20px;
  12.         //width:20px;
  13.         //background:yellow;
  14.  
  15.         //border:10px solid gray;
  16.         border:10px solid transparent;
  17.         border-top-color:gray;
  18.  
  19.         top:100%;
  20.         left:10px;
  21.     }
  22. </style>

截图：

到这里基本上完事了

下面整体样式设计下（其实就更改了盒子的背景色与箭头颜色相同）：

  1. <style>
  2.     .demo{
  3.         background-color: gray;
  4.         height: 100px;
  5.         position: relative;
  6.         width: 100px;
  7.     }
  8.     .demo:after{
  9.         content:'';
  10.         position:absolute;
  11.         //height:20px;
  12.         //width:20px;
  13.         //background:yellow;
  14.  
  15.         //border:10px solid gray;
  16.         border:10px solid transparent;
  17.         border-top-color:gray;
  18.  
  19.         top:100%;
  20.         left:10px;
  21.     }
  22. </style>

截图：

具体需要什么样的样式可以自行设置了！例如将箭头移动到其他三边可以设置border-T\R\B\L-color:gray;和TRBL(TRBL是指top\right\bottom\left)即可！

当然要修改箭头在盒子边框上的位置时，还需注意：边框border的大小不包含在自身盒子尺寸内！所以设计时需要注意margin的影响，比如箭头在下边框中居中，我们考虑上面的同时还需添加：“ margin-left:-10px; ”才可居中！

结论来自yy浮萍人生的评论（简洁形象~~哈哈~~）：

此例设计原理：设置伪类选择器盒子的宽度和高度为0,那边border形成的区域是[X]这个样子的，其他三边透明了，所以呢就显示了个三角形！

（本文参考：YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup）

更多知识分享：微笑空间站

纯CSS实现tooltip提示框，CSS箭头及形状的更多相关文章

  1. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  2. echarts 更改tooltip提示框CSS样式

    最近 做项目,用过echarts,发现tooltip提示z-index级别很高,想更改下,看了下文档:https://www.echartsjs.com/zh/option.html#tooltip. ...

  3. css兼容tooltip提示框方法

    最终效果图: 基本原理 先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置.这样就 ...

  4. 使用css实现全兼容tooltip提示框

    在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...

  5. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  6. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  7. tooltip提示框组件

    Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...

  8. 原生js实现tooltip提示框的效果

    在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...

  9. 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

随机推荐

  1. BZOJ4421 : [Cerc2015] Digit Division

    如果两个相邻的串可行,那么它们合并后一定可行,所以求出所有可行的串的个数$t$,则$ans=2^{t-1}$. 注意特判整个串不可行的情况,这个时候答案为0. #include<cstdio&g ...

  2. BZOJ 1051 & 强联通分量

    题意: 怎么说呢...这种题目有点概括不来....还是到原题面上看好了... SOL: 求出强联通分量然后根据分量重构图,如果只有一个点没有出边那么就输出这个点中点的数目. 对就是这样. 哦还有论边双 ...

  3. 编写高效的js/jQuery代码 :rocket:

    讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...

  4. [知识点]C++中的运算符

    1.前言 之前最开始学习语法和基础知识的时候,基本上最简单的运算符有所接触,当时对于位运算这种东西完全没有概念.今天对C++中出现的部分运算符尤其是位运算符进行一些总结. 2.+ - * / % 这些 ...

  5. BZOJ 1083 题解

    1083: [SCOI2005]繁忙的都市 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2431  Solved: 1596[Submit][Sta ...

  6. 【POJ】1739 Tony's Tour

    http://poj.org/problem?id=1739 题意:n×m的棋盘,'#'是障碍,'.'是空白,求左下角走到右下角且走过所有空白格子的方案数.(n,m<=8) #include & ...

  7. 【BZOJ1257】【CQOI2007】余数之和sum

    Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值,其中k mod i表示k除以i的余数.例如j(5, ...

  8. Ninject使用demo

    public class HomeController : Controller { public ActionResult Index() { //核心对象 IKernel ninjectKerne ...

  9. Spring整合Hibernate之AnnotationSessionFactoryBean与LocalSessionFactoryBean

    spring集成hibernate由两种形式 1.继续使用Hibernate的映射文件*.hbm.xml 2.使用jpa形式的pojo对象, 去掉*.hbm.xml文件 一.继续使用Hibernate ...

  10. web app 自适应方案总结 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...