CSS实现聊天气泡（三角形）

左边聊天气泡

 /* CSS */.frame{width: 100%;float: left;position: relative;padding: 0 0 0 5px;}.triangle{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #98E165;position: absolute;left: 0;top: 6px;}.rotationtiao{float: left;padding: 5px 10px;background-color: #98E165;font-size: 14px;border-radius: 2px;}<!-- HTML --><div class="frame"><div class="triangle"></div><span class="rotationtiao">这是一段聊天内容</span></div>

右边聊天气泡

 /* CSS */.frame{width: 100%;float: left;position: relative;padding: 0 5px 0 0;}.triangle{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #98E165;position: absolute;right: 0;top: 6px;}.rotationtiao{float: right;padding: 5px 10px;background-color: #98E165;font-size: 14px;border-radius: 2px;}<!-- HTML --><div class="frame"><div class="triangle"></div><span class="rotationtiao">这是一段聊天内容</span></div>

左三角

.triangle{width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-right:20px solid red;
}

右三角

.triangle{width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid red;
}

上三角

.triangle{width:0;height:0;border-right:20px solid transparent;border-left:20px solid transparent;border-bottom:20px solid red;
}

下三角

.triangle{width:0;height:0;border-right:20px solid transparent;border-left:20px solid transparent;border-top:20px solid red;
}

有什么问题欢迎评论留言，我会及时回复你的

CSS实现聊天气泡（三角形）相关推荐

css制作聊天气泡android,css实现聊天气泡效果
--------------------------------------- css功能强大,能实现很多炫酷的效果,今天给大家分享用css3绘制聊天气泡的方法: ---------------- ...
css制作聊天气泡android,CSS3巧妙实现聊天气泡
传统的聊天气泡什么又是传统的聊天气泡,直接上图代码如下实现方式大家早有耳闻,圆角矩形和三角形嘛,三角形原理就是 border 可以设置为透明,可以复制上例中的代码修改 border-color属 ...
CSS实现聊天气泡效果
html <div class="pop"><div class="arrow"></div> </div> c ...
css实现聊天气泡对话框
方法1:实现这种扁平化的气泡对话框只需用行内块元素+伪类做小三角即可 <!DOCTYPE html> <html lang="en"> <head&g ...
【CSS】如何实现微信聊天气泡
先来分析一下聊天气泡气泡分割为两部分,左边的矩形,右边的三角形矩形的实现比较简单先对对右边的三角形进行分析 div{ width:100px; height:100px; border:soli ...
android 聊天气泡_android聊天气泡在android中构建ios风格的聊天
android 聊天气泡重点 (Top highlight) In this post, we'll explore how to do two things: 1) create live cha ...
试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...
java 气泡聊天消息_CSS3 巧妙实现聊天气泡
前一阵子敢玩的 Mobile 页改版完成了,就之前的页面风格更加扁平化,从暗色系为主背景转到亮色背景,去掉更多的阴影,给用户简约的体验风格,哈哈我不是设计师不过多评价啦.感兴趣的朋友可以直接去 ida ...
HTML怎么做类似QQ聊天气泡,h5实现QQ聊天气泡的实例介绍
这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...

CSS实现聊天气泡（三角形）

左边聊天气泡

右边聊天气泡

左三角

右三角

上三角

下三角

CSS实现聊天气泡（三角形）相关推荐

最新文章

热门文章