CSS制作留言聊天框中的冒泡尖角效果 纯色+边框技巧教程

稿件作者 CMS博客 2020-04-30 16:06 前端笔记

前言

在前端切图过程中遇到一个制作聊天对话框中的箭头效果,如下图。

image.png

在我还是一个CSS小白的时候,我都是用一个图片来制作这个冒泡效果的,显得很low,很没气质。

教程效果演示

image.png

image.png

以上2种效果是我们常见的样式。

原理图

image.png

样式一:

这种比较简单,说一下步骤:

1、我们写一个div,写出尺寸和圆角,并且设置position属性。

2、用伪类::before来定义一个长宽都是0的形状,然后通过border属性,三边设置透明,底边设置颜色。

3、通过将::before定位到div上方合适的位置,组合而成。

样式二:

这种操作步骤跟样式一基本一样,多一个小细节:

1、写一个div,写出员村、边框线、圆角,并且设置position属性。

2、用伪类::before来定义一个长宽都是0的形状,然后通过border属性,三边设置透明,底边设置div的背景色。

3、用伪类::after来定义一个长宽都是0的形状,然后通过border属性,三边设置透明,底边设置div的边框色。

4、通过将::before、:after定位到div上方合适的位置,组合而成。

5、注意::before、:after定位的层级,背景色元素在上,边框色元素在下,即用背景色元素遮挡住边框色元素。

6、注意背景色元素要比边框色元素低1~2像素,目的是让背景色元素露出一点点,正好就像边框线一样。

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS制作留言聊天框中的冒泡尖角效果 纯色+边框技巧教程</title>
    <style>
        .demo{ padding:50px; }
        .mb10{ margin-bottom: 10px;}
        hr{ margin:20px 0;}
        .msg1{ position: relative; width:300px;background: #d0d0d0; border-radius: 10px; padding:20px; margin-top:50px; }
        .msg1::before{ position: absolute; left:30px; top:-20px; content:''; width:0; height: 0; border:10px solid transparent; border-bottom-color:#d0d0d0; }
        .msg2{ position: relative; width:300px;background: #f2f2f2; border:1px solid #d0d0d0; border-radius: 10px; padding:20px; margin-top:50px; }
        .msg2::before,.msg2::after{ position: absolute; content:''; width:0; height: 0; border:10px solid transparent;  }
        .msg2::before{ left:30px; top:-20px; border-bottom-color:#d0d0d0; }
        .msg2::after{ left:30px; top:-19px; border-bottom-color:#f2f2f2; }
    </style>
</head>
<body>
    <div class="demo">
        <div class="mb10">效果1</div>
        <div class="msg1">Hello World!</div>
        <hr>
        <div class="mb10">效果2</div>
        <div class="msg2">Hello China!</div>
    </div>
</body>
</html>


你学会了嘛?学会这个技巧,你可以依葫芦画瓢作出其他位置、其他形状的聊天气泡效果啦。

  • 分享:

文章评论(审核通过可见)

说点什么
共有0条评论