前端css实现气泡框

场景：

工作中遇到需要使用气泡框进行提示的效果，但是不需要鼠标移上去，是个静态的气泡框效果，于是决定使用纯css进行实现。实现思路：一个带边框的容器，在左侧放一个三角实现气泡框效果。

实现效果图：

1. 方式一

可以给一个div标签，然后对其设置属性，但是由于需求我这边需要对一个span标签进行操作，span是一个行内元素，需要先对其进行转换成块内元素再进行属性限制。

组件元素：

 <span className="popTag"><span>双击卡片，可修改报表类别名称</span></span>

气泡框的样式：

// 该部分是个框的效果
.popTag span { background-color: #4d86ff17; // 设置背景色display: inline-block;   // 将行内元素转为行内块元素，才能设置块属性padding: 0 10px;         // 左右内边距为10pxborder-radius: 4px;      // 设置边框的圆角margin-left: 20px;position: relative;      // 设置相对位置布局font-size: 14px;font-weight: normal;}
// 该部分是个三角形的效果，实现原理，将一个框的宽度高度设置为0出现四个三角形，设置边框为6px,设置颜色和线条，将不需要显示三边设置为白色，用四个方向设置绝对位置，即可实现。.popTag span::after {content: '';border: 6px dashed #4d86ff17;border-top: 6px solid #fff;border-bottom: 6px solid #fff;border-left: 6px solid #fff;position: absolute;top: 5px;left: -12px;}

2. 方式二：

实现效果：

<div class='pop' id='pop'><div id='triangle' class='triangle-bottom'></div></div>

.pop{width:200px;height:100px;border:2px solid grey;border-radius: 4px;box-shadow: 2px 2px 2px grey;position:absolute;background-color:white;}.triangle-bottom{width:0;height:0;border-top:10px solid grey;border-left:10px dashed transparent;border-right:10px dashed transparent;position:absolute;left:90px;top:100px;}

3. 方式三：

实现思路：先给个框，然后在div之前给个三角形并设置三角形的三边为透明，一边显示颜色，这个时候是个实心的三角形，接下来在div之后设置三角形的颜色为白色，即出现空心的三角形。实现效果：

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

    .div{width: 200px;height: 100px;border: 2px solid #ff0;position: relative;}.div::before{content: '';width: 0;height: 0;border: 20px solid;position: absolute;bottom: -40px;left: 140px;border-color:  #ff0 transparent transparent;}.div::after{content: '';width: 0;height: 0;border: 20px solid;position: absolute;bottom: -36px;left: 140px;border-color:  #fff transparent transparent;}

4. 实现椭圆形的气泡框

将div设置为正方形，并旋转一定度数成为菱形，在设置菱形上半部分位置与对话框位置重合，则形成如图所示的气泡框。

除此之外，还可以设置气泡div的border-radius，并设置菱形旋转角度与位置，构成气泡框。若对话框是矩形，则旋转45度即可。

效果如下：

<div id="" class="qipao">这是气泡框demo</div>
<div class="demo"></div><script>
.qipao{width: 200px;height: 60px;margin: 20px 0 20px 200px;background: #69A6D1;text-align: center;padding-top: 40px;font-size: 16px;border-radius: 50%;}
.demo{width: 38px;height: 38px;background: #69A6D1;transform: rotate(70deg);margin-left: 230px; margin-top: -57px;
}
</script>

前端css实现气泡框相关推荐

[css] 使用css实现气泡框的效果
[css] 使用css实现气泡框的效果 <!DOCTYPE html> <html lang="en"><head> <meta char ...
css实现气泡框小尾巴
需求描述编写web聊天工具时,聊天的样式一般会有一个三角形或者小尾巴,这时有2种解决方案,一是采用图片格式,另一种采用css实现.这里介绍css的实现方式. 尾巴样式实现 <!DOCTYPE ...
css制作tips提示框，气泡框，制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
纯CSS实现气泡聊天框的方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
html怎么制作气泡,制作CSS气泡框
气泡状文本框,是一种很生动的网页设计手段. 它可以用来表示用户的发言. 也可以用来作为特定信息的提示符. DVD租借网站Netflix,还用它显示碟片的详细信息. ================== ...
纯CSS实现一个气泡框
实现原理:主要通过CSS的border-color属性,结合::before.::after和position: absolute实现. (1)画一个正方形或长方形的盒子,别忘记此盒子需加上posit ...
纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...
纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
纯Css实现三角形、气泡框的三角形
纯Css实现三角形上下左右箭头左上.左下.右上.右下箭头气泡框的三角形上下左右箭头效果图片 HTML <div class="tri ...

前端css实现气泡框

前端css实现气泡框相关推荐

最新文章

热门文章