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

如何实现类似于下图的对话气泡框呢

首先我们明确思路：一个正方形的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的上层了，或者说从内部开始体现阴影。

如何画一个对话气泡框（css实现）相关推荐

linux视频对话框,抖音对话框视频怎么做？如何在视频画面上添加对话气泡框？视频加对话气泡的方法...
小编家里有个快要两周岁的小侄女,平日里总是喜欢做一些人小鬼大的事情,这不,前段时间她妈妈发了一个小视频,她拉着一个跟她差不多大的行李箱一脸严肃地说她要去上班~那么小一个小不点,居然很认真地对她妈妈说要 ...
cadence SPB17.4 - 用autoCAD2022画一个PCB板框
前言如果是规则板框(长方形),在cadence SPB17.4的板框层中直接画线就行. 如果板框复杂(异形),可以在autoCAD中画形状,然后另存为.DXF文件给SPB17.4导入板框用. 试了一 ...
Flutter使用ClipPath画一个聊天气泡
先看一下效果图: 原理: 先画一个三角形再画一个圆角矩形,然后把两个图案重合起来就实现了一个聊天气泡实现代码bubble.dart import 'package:flutter/material ...
Android 利用RectF画一个类似聊天框弹出样式
最近项目的一个类似聊天样式的popupwindow测试小美女说里面的字体垂直间距不一样,设计切的图会有一个小三角号嘛,我们代码里没法弄成dp啊,所以自定义一个吧.这样就ok了.看下效果: 自定义vie ...
纯CSS实现对话气泡(MD.5)
在漫岛的注册成功引导页,有一个小姐姐讲述一些网站玩法规则,需要一个对话气泡效果,用纯CSS实现了一下,效果如下(点击图片放大看): 网站实际效果结合了动画体验比截图好,,做气泡不难,关键点在于三角形的 ...
纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
画一个空心圆_圆形在PPT中的6大妙用，每一个都能瞬间提升PPT的逼格！
Hello,各位叨友们好呀!我是叨叨君~ 大家在做PPT的时候,用的最多的形状是什么呢?我相信大部分的人回答是圆形或者矩形,看似简单的两个形状,有些人用的是简约又漂亮,而有些人用的就是简约又单调. 今 ...
html5对话框背景透明度,纯CSS3背景透明的Speech Bubbles对话气泡
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效.该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果. 使用方法 HTML结 ...
html如何设置提示收到消息,从零开始实现一个消息提示框
引言消息提示框在实际应用场景当中比较常见,最常用的就是element ui的消息提示框,我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理,并自己动手实现呢?为了提升我们的个人能力和竞争 ...

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

如何画一个对话气泡框（css实现）相关推荐

最新文章

热门文章