css3 微信聊天小尖角,用CSS制作聊天框小尖角、气泡效果

经常看到这样的尖角，以前不懂，以为都是用图片做出来的，后来惊奇的发现，原来很多都是用CSS做出来的，既美观又节省资源，真是两全其美啊！

那么，用CSS怎么实现这种效果呢？首先，来写一个简单的代码：

代码如下:

.arrow {

width:0;

height:0;

font-size:0;

border:solid 10px #000;

}

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

代码如下:

.arrow {

width:0;

height:0;

font-size:0;

border:solid 10px;

border-color

:#f00 #0f0 #00f #000;

}

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

代码如下:

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;

}

大功告成，效果如下图：

【相关推荐】

1. CSS3免费视频教程

2. 浏览器实现移动端高性能css3动画

3. h5+css3实现图片飞入和淡入淡出效果的代码实例

4. 教你使用CSS3制作8种Loading动画

5. 教你用CSS绘制标准的圆形图案

css3 微信聊天小尖角,用CSS制作聊天框小尖角、气泡效果相关推荐

HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
css制作聊天气泡android,CSS3巧妙实现聊天气泡
传统的聊天气泡什么又是传统的聊天气泡,直接上图代码如下实现方式大家早有耳闻,圆角矩形和三角形嘛,三角形原理就是 border 可以设置为透明,可以复制上例中的代码修改 border-color属 ...
css制作聊天气泡android,css实现聊天气泡效果
--------------------------------------- css功能强大,能实现很多炫酷的效果,今天给大家分享用css3绘制聊天气泡的方法: ---------------- ...
用CSS制作圆角框的方法一,二
CSS产生之初,只能制作直角边框,虽然可以制作圆角的CSS3已经问世,但还不普及.曲线设计在网页中的广泛应用,使圆角成为了时髦的CSS技术之一.创建圆角的方法有很多种,每种要根据实际情况应用.下面我 ...
CSS特效（二）：利用html和css制作毛玻璃特效和按钮动画效果
最终的效果图片: 毛玻璃效果:在style标签中,在form表单的before中利用filter的blur属性以及box-shadow的值设置,就可以做出form表单后面的毛玻璃效果背景,还要记得设置 ...
php文本框发光,Css制作文本框发光效果
shadow //*区域内为Shadow类*// font-weight:bold:color:#FF9900:"> Hongen Online //*定义字体名称.大小.粗细.前景色 ...
纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
css怎么制作自己头像跳跃,如何用CSS制作闪烁的箭头
如何用CSS制作闪烁的箭头阅读:9441 次编辑日期:2016-03-21 目录: 概述: 随着移动端的普及,CSS3的动画效果用的越来越多,甚至很多时候PC端也在用,因为可以省去繁杂的JS, ...
使用css制作动态时钟详细教程
使用css制作动态时钟详细教程完成效果: 步骤一: 创建一个宽高为300px圆形时钟的外表盘,边框加上阴影更好看一点,页面背景色为黑色代码: <!DOCTYPE html> <h ...

css3 微信聊天小尖角,用CSS制作聊天框小尖角、气泡效果

css3 微信聊天小尖角,用CSS制作聊天框小尖角、气泡效果相关推荐

最新文章

热门文章