CSS实现气泡对话框

最新推荐文章于 2024-02-28 09:56:29 发布

前端菜菜DayDayUp

最新推荐文章于 2024-02-28 09:56:29 发布

阅读量5k

点赞数 10

分类专栏： css样式文章标签： css

本文链接：https://blog.csdn.net/weixin_48594833/article/details/120726862

版权

css样式专栏收录该内容

9 篇文章 1 订阅

订阅专栏

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：

拆分来看，形如这种气泡框无外乎就是一个矩形框 + 一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。

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

HTML:

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

CSS:

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

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

第二步: 最关键的，就是如何实现三角形部分了！

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

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

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

HTML:

<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;
}

效果图：可以看到四边都成了一个梯形。

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

很显然我们只需要其中的一个三角形，那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色，就能模拟出一个三角来，推荐将其他三边颜色设置为透明，即color的值为transparent，如果其他三边颜色跟页面背景一样，虽然视觉上只能看到一个三角，但背景颜色一旦改变，其他三边颜色也要随之改变。

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

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

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

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

效果如图：

好了，大概的样子有了，咦！！！是不是还差一点点呢？喔！原来三角形处应该是空心的，而非实心三角形呀！！那么，在div元素之后插入一个同样的三角形，背景色为白色，盖在原有的黄色三角形不就可以了么？好的，来看看！！

CSS:

.div5::after{
	content: '';
	width: 0;
	height: 0;
	border: 20px solid;
	position: absolute;
	bottom: -36px;
	left: 140px;
	border-color:  #fff transparent transparent;
}

完成之后，是不是有点突兀，再给气泡框加个圆角（border-radius）！

好了，现在展示全部代码和效果图！！！

<style>
    .div{
        width: 200px;
        height: 100px;
        border:5px solid #ff0;
        border-radius: 16px;
        position: relative;
    }
    .div::before{
		content: '';
		width: 0;
		height: 0;
		border: 20px solid;
		position: absolute;
		bottom: -41px;
		left: 80px;
		border-color:  #ff0 transparent transparent;
	}
    .div::after{
		content: '';
		width: 0;
		height: 0;
		border: 20px solid;
		position: absolute;
		bottom: -35px;
		left: 80px;
		border-color:  #fff transparent transparent;
	}
</style>


<body>
    <div class="div">
        CSS3气泡框
    </div>
</body>

效果图展示：

或者可以这样写！！！！！

<style>
    .tag{ 
        width:300px; 
        height:100px; 
        border:5px solid #ff0; 
        position:relative;
        border-radius: 8px; 
        background-color:#FFF;
    }
    .arrow{ 
        position:absolute; 
        width:40px; 
        height:40px; 
        bottom:-42px; 
        left:100px;
    }
    .arrow *{ 
        display:block; 
        border-width:20px; 
        position:absolute; 
        border-style:solid dashed dashed dashed; 
        font-size:0; line-height:0; 
    }
    .arrow em{
        border-color:#ff0 transparent transparent;
    }
    .arrow span{
        border-color:#FFF transparent transparent; 
        top:-7px;
    }
</style>


<body>
    <div class="tag">
        <div class="arrow">
            <em></em>
            <span></span>
        </div>
        CSS气泡框实现
    </div>
</body>

举一反三：不规则三角箭头的气泡框又如何实现？

HTML结构同前面一样：

<div class="tag">
 <div class="arrow">
     <em></em><span></span>
    </div>
    CSS气泡框实现
</div>

矩形框CSS样式稍微改动一下：

.tag{ width:300px; height:100px;position:relative; background-color:#09F;}

重新定位一下三角箭头：

.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}

元素相邻的两边border-style值设为solid（显示），另两边设为transparent（不会显示）

.arrow *{ display:block; position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }

首先模拟一个直角三角形，把一个元素的相邻两边color设为相同的值，另外两边颜色设为透明，即可得到一个直角：

.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;}

把两个直角三角形重叠在一起就可以得到一个不规则三角形

.arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;}

至此，不规则三角箭头的气泡框效果已经实现。

前端菜菜DayDayUp

关注

10
点赞
踩
36

收藏

觉得还不错? 一键收藏
4
评论
CSS实现气泡对话框

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+ 一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。第一步，首先要有个框！很简单，一个div就可以了，然后.
复制链接

扫一扫