可自定义箭头样式的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和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 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实现短信发送代码
2015/07/05 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
js验证密码强度解析
2020/03/18 Javascript
Python中自定义函数的教程
2015/04/27 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
深入了解Python 变量作用域
2020/07/24 Python
How TDD works
2012/09/30 面试题
自荐信模版
2013/10/24 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
行政复议决定书
2015/06/24 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
车位出租协议书范本
2016/03/19 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA