详解HTML聊天对话框的实现

2021-02-21 17:52:48 前端开发 908

简介

在日常应用使用过程中，我们经常可以看到一些类似于微信聊天对话框的样式，本站的建站日志也有类似的东西。在一个容器前面加一个小箭头的样式，查看CSS样式发现并不是图片或者其他元素，本文仔细阐述一下如何实现其样式。

1.看看长啥样

我截取了本站建站日志的样式如下图所示

示例图片

其详细的css代码如下，左边的小箭头其实就是通过:before这个伪元素来实现的。

.cd-timeline-content {
    position: relative;
    margin-left: 60px;
    background: #303030;
    border-radius: 0.25em;
    padding: 1em;
    box-shadow: 0 3px 0 #202020;
}

.cd-timeline-content:before {
    content: '';
    position: absolute;
    top: 16px;
    right: 100%;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid #303030;
}

现在我们先不讨论下面的代码，我们先来看看其他的知识点。

2. :before

before顾名思义就是在什么之前，与之对应的是:after伪元素，通过该伪元素可以在目标元素前加入某些内容，看看下面的示例

<style>
.hello:before{
    content: "Hello ";
}
.hello:after{
    content: "!";
}
.hello{
    color: white;
}
</style>

<body>
    <p class="hello">World</p>
    <p class="hello">Tom</p>
    <p class="hello">Jack</p>
</body>

hello

可以看到在每个p标签前面加上了Hello 在后面加上了!，通过伪元素:before和:after来实现的。

3.position属性

position字面意思是位置，在css中position有五个值

static (默认值)
relative
fixed
absolute
sticky

在上面的代码中使用到了relative以及absolute，这里就初略讲一个两个属性的功能。

a.relative

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

.box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

relative

b.absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

.box_absolute {
  position: absolute;
  left: 30px;
  top: 20px;
}

absolute

4.border属性

相信很多小伙伴都很疑惑那个三角形是怎么来的，其实就是通过border以及border-right来实现的，听我慢慢道来。

border就是给容易添加一个外边框，可以看看如下的例子

<style type="text/css">
.border-gray{
    height: 50px;
    width: 50px;
    background-color: white;
    border: 4px solid #aaaaaa;
}
</style>
<body>
<div class="border-gray"></div>
</body>

我们可以清楚的看到在div加了一个灰色的外边框，接下来我们将四个方向的边框颜色修改一下，并且为了更加直观，将边框的宽度改为10px；

<style type="text/css">
.border-gray{
    height: 50px;
    width: 50px;
    background-color: white;
    border-top: 10px solid red;
    border-right: 10px solid blue;
    border-left: 10px solid green;
    border-bottom: 10px solid cayon;
}
</style>
<body>
<div class="border-gray"></div>
</body>

10px

这下小伙伴们应该有点思路了吧关于小三角形怎么形成的。我们可以清楚的看到四个方向边框交界处是通过45°进行划分的，也就是所在四个角相邻的两个边框各占一半，边框的长度就是对应水平或者垂直方向的长度，如果到这里还不明白的话我们继续修改例子。

<style type="text/css">
.border-gray{
    height:0;
    width: 0;
    background-color: white;
    border-top: 30px solid red;
    border-right: 30px solid blue;
    border-left: 30px solid green;
    border-bottom: 30px solid cadetblue;
}
</style>
<body>
<div class="border-gray"></div>
</body>

30px

我们将div的长宽都设置为0，那么边框的长度不就都变为了0么？那么同一个方向两个角直接就没有长度了，所以就形成了三角形的样子，如图上所示的，我们可以清楚的看到四个三角形，如果我们需要保留哪个方向的三角形我们将其他方向边框颜色设置为透明就可以啦。

保留top

<style type="text/css">
.border-gray{
    height:0;
    width: 0;
    background-color: white;
    border: 30px solid transparent;
    border-top: 30px solid red;
}
</style>
<body>
<div class="border-gray"></div>
</body>

保留bottom

<style type="text/css">
.border-gray{
    height:0;
    width: 0;
    background-color: white;
    border: 30px solid transparent;
    border-bottom: 30px solid red;
}
</style>
<body>
<div class="border-gray"></div>
</body>

保留right

<style type="text/css">
.border-gray{
    height:0;
    width: 0;
    background-color: white;
    border: 30px solid transparent;
    border-right: 30px solid red;
}
</style>
<body>
<div class="border-gray"></div>
</body>

保留left

<style type="text/css">
.border-gray{
    height:0;
    width: 0;
    background-color: white;
    border: 30px solid transparent;
    border-left: 30px solid red;
}
</style>
<body>
<div class="border-gray"></div>
</body>

result

注意border必须在border-* 前面定义，如果border定义在border-*后面则会覆盖掉border-*的样式

需要哪个朝向的箭头则定义相反方向的border-*，如需要left朝向的箭头则定义border-right

5.搞一个试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .chat{
            position: relative;
            min-height: 45px;
            width: 200px;
            border-radius: 3px;
            padding: 3px;
            background-color: #eeeeee;
            font-size: 14px;
        }

        .chat>p{
            margin: 0;
        }

        .chat:before{
            content: '';
            position: absolute;
            right: 100%;
            top: 15px;
            height: 0;
            width: 0;
            border: 7px solid transparent;
            border-right: 7px solid #eeeeee;
        }
    </style>
</head>

<body>
<div class="chat">
    <p>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</p>
</div>
</body>
</html>

sample

文章链接：http://2dogz.cn/blog/article/31/

MySQL学习摘要之管理常用命令 Gerrit接口使用说明

1条评论

Macv 博主 2021-02-24T16:36:21

讲得不错小伙子啊