如何画一个对话气泡框（css实现）

最新推荐文章于 2024-07-26 16:03:03 发布

起来改bug

最新推荐文章于 2024-07-26 16:03:03 发布

阅读量2.3k

点赞数 3

文章标签： CSS 对话框三角形伪元素布局

本文链接：https://blog.csdn.net/q553866469/article/details/120933465

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如何实现类似于下图的对话气泡框呢
在这里插入图片描述
首先我们明确思路：一个正方形的div框和一个三角形组成，纯css实现

下面我们一步步实现效果。

1.先画出一个矩形框

.div{
        border: 2px gray solid;
        background-color: yellow;
        width: 150px;
        height: 100px;
        border-radius: 10px;
        margin-top: 50px;
    }

<div class = "div"></div>

实现效果如下所示：
在这里插入图片描述
2.现在我们需要需要画一个三角形

查阅了网上的实现，都是使用的border来做文章的，原理就是加粗border，透明化掉上、右、左的border，将div的宽高设置为0，那么我们一起来实现一下：

1）先画出一个div的矩形

.triangle {
            width: 50px;
            height: 50px;
            border: 1px solid #000
        }

<div class="triangle"></div>

2）加粗border为20px效果如下
在这里插入图片描述
3）设置宽高为0，并给四个边框分别填充颜色

.triangle {
            width: 0px;
            height: 0px;
            border: 20px solid;
            border-color: red orange blue green;
        }

在这里插入图片描述
现在我们要保留下border-top，其余都设置为透明，这样就画出了一个三角形：

4）现在就是如何在之前画好的div上实现了，我们选择使用选择器，为什么使用before或者after选择器呢，因为他们添加的位置是在标签内容的前后，和我们要的矩形是一体的用在这里恰好合适，我们就使用after选择器吧，看一下实现：

 .div::after{
            content: '';
            width: 0;
            height: 0;
            border: 20px solid;
            border-color: red transparent transparent transparent;
        }

本身after选择实现的位置在这里，为什么会超出去呢，我们可以想象其实三角形就是border，向下角的其实才是内容的中心点，所以border设为20自然就会超出：
在这里插入图片描述
5）下来就是调整位置

方法其实有很多种，我们先尝试一下margin和padding是没有什么用的，padding的话只能向上移动，这其实也能理解，本身我们三角形只是一个border所以中间div为0，它只能越来越离开中心点，margin设置之后没什么用（这里需要研究下为什么），那我们就使用定位吧，设置一个相对定位，就是相对于本身这个黄色矩形div来说，我们看一下效果：
在这里插入图片描述
我们再改变下颜色稍微优化一下，就实现了效果：

附上代码：

<!DOCTYPE html>
<html>
<head>
    <title>dialog</title>
    <style type="text/css">
        .div {
            background-color: yellow;
            width: 150px;
            height: 100px;
            border-radius: 10px;
            margin-top: 50px;
            box-shadow: 5px 5px 10px #888888;
        }
        .div::after{
            content: '';
            width: 0;
            height: 0;
            border: 20px solid;
            border-color: yellow transparent transparent transparent;
            position: relative;
            top: 120px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div class = "div"></div>
</body>
<script type="text/javascript">

PS：注意几点

1.css3中修订后的伪元素使用：：两个冒号，使用单冒号和双冒号的功能还是一样，IE8只支持单冒号的伪元素，所以使用单冒号的最安全；

2.::before是在标签内容前面添加内容， ::after是在标签内容后面添加内容；

3.box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平阴影的位置（X轴移动）（必填）

v-shadow：垂直阴影的位置（Y轴移动）（必填）

blur：模糊度，值越大阴影发散的越大越模糊；

spread：阴影大小向四周范围扩大的大小如下图所示：
在这里插入图片描述
color ：颜色就不必说了

inset：可选。从外层的阴影（开始时）改变阴影内侧阴影

这句话很抽象，我们还是实践了一下，效果感觉像是在div的上层了，或者说从内部开始体现阴影。
在这里插入图片描述

起来改bug

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
如何画一个对话气泡框（css实现）

如何实现类似于下图的对话气泡框呢首先我们明确思路：一个正方形的div框和一个三角形组成，纯css实现下面我们一步步实现效果。1.先画出一个矩形框.div{ border: 2px gray solid; background-color: yellow; width: 150px; height: 100px; border-radius: 10px; margin-top: 50px;
复制链接

扫一扫

专栏目录