纯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制作的20种loading动效
Jul 05 HTML / CSS
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 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
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
layui使用label标签的方法
2019/09/14 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
基于python生成器封装的协程类
2019/03/20 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
局域网标准
2016/09/10 面试题
法人授权委托书格式
2014/04/08 职场文书
社团活动总结格式
2014/08/29 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
费城故事观后感
2015/06/10 职场文书
羊脂球读书笔记
2015/06/30 职场文书
初中毕业生感言
2015/07/31 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS