可自定义箭头样式的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中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 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
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php使用PDO方法详解
2014/12/27 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
document.all与WEB标准
2020/05/13 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
优秀经理事迹材料
2014/02/01 职场文书
学习雷锋标语
2014/06/25 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
信访维稳工作汇报
2014/10/27 职场文书
死者家属慰问信
2015/03/24 职场文书
关于远足的感想
2015/08/10 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python