文档章节

CSS: 聊天框效果实现随记

海礁
 海礁
发布于 2017/07/06 00:17
字数 276
阅读 97
收藏 0

1.效果如下:

思路:一个没有宽高的div,如果边框为20px且颜色不同,那么可以看到出现的图形是一个四色的三角形组成的正方形。

代码:

.chat-msg {
    position: relative;
    height: 30px;
    background-color: yellowgreen;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    display: inline-block; //行内块元素,宽度自适应
}

.arrow-right {
    position: absolute;
    top: 5px;
    right: -18px;
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent;
    border-left-color: yellowgreen !important;
    display: inline-block;
}

<div class="chat-msg">
    <span>今天天气不错呦,一起去海边走走怎么样?</span>
    <div class="arrow-right"></div>
</div>

 

2.效果如下:

思路:如果两个正方形大小相同,且左下都有圆角,但是z-index不同,那么他们水平相交时,聪明的你有没有发现什么有意思的地方呢?!

代码:

.chat-msg {
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    display: inline-block;
    background-color: yellowgreen;
}

.chat-msg:before {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -10px;
    width: 0px;
    height: 20px;
    z-index: -1;
    border-right: 20px solid yellowgreen;
    border-bottom-left-radius: 18px;
}
.chat-msg:after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -20px;
    width: 0px;
    height: 20px;
    z-index: 1;
    border-right: 20px solid white;
    border-bottom-left-radius: 18px;
}

<span class="chat-msg">今天天气不错呦,一起去海边走走怎么样?</span>

© 著作权归作者所有

海礁
粉丝 3
博文 9
码字总数 4018
作品 0
广州
程序员
私信 提问
原生js的小demo整理

image.png 1.二级导航 (js方法和css3的方法)--建议使用css3样式(若两种方法实现的效果一样) (1)js方法 例子 index.html Index.css(注意:注释的设置微博二字的hover,但在css样式里设置显...

lilyping
2017/11/23
0
0
CSS——把“可以动的盒子”更优雅地展示:② “居中”盒子

前言: 让“盒子”居中,在实际工作中可以说是随时都会用到。方法很多,我们在都理解的基础上用起来才能有的放矢、得心应手。 1 水平居中 1.1 在父元素上设置 使文字/图片水平居中 1.2 marg...

itsOli
05/07
0
0
4月份本周超过 10 款最新免费 jQuery 插件

这里我们收集了超过 10 个最新的免费 jQuery 插件,这是我们在 10/04/2015 to 16/04/2015 这段时间内从网上找到的。尽管这些插件我们还没有推荐,但或许对你有用。 Jquery Image Player 外观...

oschina
2015/04/24
4.7K
9
CSS3实现Tooltip提示框飞入飞出动画

我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片。还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观不怎么好看。今天我来分享一下利用CSS3快速...

yykj
2014/04/14
2K
0
基于Qt开发QQ气泡式聊天界面的技术建议

最近在写IM 聊天界面,想设计出一个类似QQ气泡聊天的样式 使用了几种办法 1:使用Qt下面的QListview来实现QQ类似效果,差强人意 2:使用QWebview加载html css样式来完成,发现效果不错,但是...

toby520
2014/06/24
2.5K
8

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部