可自定义箭头样式的CSS3气泡提示框


Posted in HTML / CSS onMarch 16, 2016

一款基于纯CSS的气泡提示框,整个提示框由箭头和矩形框组成,并且气泡提示框的箭头可以有不同的方向。

可自定义箭头样式的CSS3气泡提示框

在线预览    源码下载

实现的代码。

css代码:

CSS Code复制内容到剪贴板
  1. .arrow_box {   
  2.     positionrelative;   
  3.     background#88b7d5;   
  4.     border4px solid #c2e1f5;   
  5. }   
  6. .arrow_box:after, .arrow_box:before {   
  7.     bottombottom: 100%;   
  8.     left: 50%;   
  9.     bordersolid transparent;   
  10.     content" ";   
  11.     height: 0;   
  12.     width: 0;   
  13.     positionabsolute;   
  14.     pointer-events: none;   
  15. }   
  16.     
  17. .arrow_box:after {   
  18.     border-color: rgba(136, 183, 213, 0);[......]   
  19.   

以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 #HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 #HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 #HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 #HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 #HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 #HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 #HTML / CSS
You might like
php如何调用webservice应用介绍
2012/11/24 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python简单实现刷新智联简历
2016/03/30 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
用Python逐行分析文件方法
2019/01/28 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
预备党员转正考核材料
2014/06/03 职场文书
工地安全生产标语
2014/06/06 职场文书
优秀班组申报材料
2014/12/25 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
团委工作总结2015
2015/04/02 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL