可自定义箭头样式的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 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP实现货币换算的方法
2014/11/29 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Django+Vue跨域环境配置详解
2018/07/06 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python实现学生管理系统
2018/01/11 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python-openCV开运算实例
2020/07/05 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
大学生自荐信
2013/12/11 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
文明工地标语
2014/06/16 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
网站出售协议书范文
2014/10/10 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
家庭经济困难证明
2015/06/23 职场文书
Python基础之进程详解
2021/05/21 Python