纯CSS制作一个简单气泡对话框（图文详解）-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家一步步介绍使用纯CSS制作简单气泡对话框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

用气泡框图片直接插入即可，但是，图片每次都需要加载，可以用CSS来实现！

首先，得弄明白，气泡框是怎么实现的。知道了原理之后就可以无限变通啦！！！！

先来一个基本的气泡框图！

第一步，首先要有个框！很简单，一个div就可以啦！然后对其div设置相对定位。

HTML：

1	`<div` `class="div"></div>`

CSS:

.div{
    width: 200px;
    height: 100px;
    border: 2px solid #ff0;
    position: relative;
    }

如图，这是一个框，基本的形状就有啦！

接着，最关键的，就是如何实现三角形部分啦~

在此前得搞明白，三角形是怎么来的？

在这里，我先举一个例子，来解析一下！！！！

来看看下图。一步一步来！！！

HTML:

1 2	`<p>1.下面是一个div.长宽为50*50的正方形，边框宽度为50</p>` `<div` `class="div1"></div>`

CSS:

.div1{
    width: 50px;
    height: 50px;
    border: 50px solid;
    border-color: yellow skyblue pink deeppink;
}

效果图：我们可以看到边框为50px的时候，已经呈梯形了对不对？

接下来，把正方形的宽高都设为0，只剩下50px的边框，我们来看看效果图，是不是出现了四个三角形？是的，边框已经没有再包裹任何东西了。只剩下边框它本身了。

我们取上边框，剩下的三条边都颜色设为透明！

是不是知道三角形从何而来了呢？

我们回到气泡框，只需要把三角形定位到长方形的框下面，气泡框就基本成型啦！！

CSS：在div之前插入此样式！用::before 就ok!!! 对其绝对定位！把上边框颜色设为：#ff0，左右边框为透明色，下边框为透明色

.div::before{
    content: '';
    width: 0;
    height: 0;
    border: 20px solid;
    position: absolute;
    bottom: -40px;
    left: 140px;
    border-color:  #ff0 transparent transparent;
}

结果图：

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 纯CSS制作一个简单气泡对话框（图文详解）

纯CSS制作一个简单气泡对话框（图文详解）

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论