纯CSS实现聊天框小尖角、气泡效果


Posted in HTML / CSS onApril 04, 2014

纯CSS实现聊天框小尖角、气泡效果

那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码:

复制代码
代码如下:

<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px #000;
}</style>

这儿,我们可以得到一个黑色的正方形,其实这是边框组成的,因为div的宽度和高度都是0,。那么,我们具体来看看,div宽度和高度都是0时,它的上下左右四边框都是怎样的,下面我们把边框的各边颜色分别设置为不同颜色:

复制代码
代码如下:

<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}
</style>

我们发现,原来当div的宽度和高度都是0的时候,它的整个边框是由四个三角形组成的,每一边为一个三角形,那么我们就可以利用这个特点,来做可爱的小尖角了。我们只要把不需要的三边的边框(三角形)的颜色设置为与背景相同即可,这样就只能看到你想要的那个三角形了,然后再利用定位调整一下位置就可以了。具体代码如下所示:

复制代码
代码如下:

<div class="send">
<div class="arrow"></div>
</div>
<style type="text/css">
body {
background:#4D4948;
}

.send {
position:relative;
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
}

.send .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

大功告成,效果如下图:

纯CSS实现聊天框小尖角、气泡效果

HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 #HTML / CSS
CSS类名支持中文命名的示例
Apr 04 #HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 #HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 #HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 #HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 #HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 #HTML / CSS
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php的hash算法介绍
2014/02/13 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
js原生Ajax的封装和原理详解
2017/03/11 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
python根据路径导入模块的方法
2014/09/30 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
大学生护理专业自荐信
2013/10/03 职场文书
小松树教学反思
2014/02/11 职场文书
日化店促销方案
2014/03/26 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
目标责任书格式
2014/07/28 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android