废话:本人目前大学生,正在准备面试参与工作,有些比较实用到功能或者组件实现、面试题会在有时间到时候写博分享出来。
聊天气泡实现
今天要做的是如何实现聊天时候的气泡效果,如图:
要实现这个,最困难的其实就是在于那个边上的小三角形。如果降低一下需求,那么就是:
噢~太简单了
.class2 {
display: inline-block;
padding: 10px 15px 10px 20px;
background-color: #9fe766;
font-size: 28px;
border-radius: 5px;
}
事实上,要在这个基础上,加上一个三角形,只要知道以下的知识点就够了(敲黑板!)
我们给一个<div class="class1"></div>
写如下的样式:
.class1 {
width: 0;
height: 0;
border-top: 20px solid red;
border-left: 20px solid yellow;
border-right: 20px solid green;
border-bottom: 20px solid black;
}
可以看到效果图如下:
OK,我们需要的是一个向右的三角块,所以我们把其他三个方向的颜色设置成 transparent(透明色)
nice ,这就是我们想要的。那么接下来的问题就是把三角块和气泡拼接到一起了。
.class2 {
position: relative;
display: inline-block;
padding: 10px 15px 10px 20px;
background-color: #9fe766;
font-size: 28px;
border-radius: 5px;
}
.class2::before {
position: absolute;
top: 20px;//调整垂直偏移量
left: 100%;//调整水平偏移量
content: "";//因为使用伪类元素,所以需要一个content为空将元素大小撑起来
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 10px solid #9fe766;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
}
这个就是我们需要实现的效果啦。
可以适当修改border-top/left/right/bottom的大小,获得其他的稍微不一样一点的三角块。
当然,这个方法有一个小缺陷,无法做那种倾角很夸张的三角块。
原因就是使用border-top/left/right/bottom能达到的最大倾角就是90度,也就是下图中的倾角从1位置到2位置。
至于参数值可以改成负值吗?对不起,我试过了,没用的。