css - 气泡框 - 三角形

最新推荐文章于 2023-09-21 22:01:33 发布

三游

最新推荐文章于 2023-09-21 22:01:33 发布

阅读量322

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/zm151110202/article/details/103138149

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、绘制一个三角形 ◀

<style>
.arrow{
		width: 0;
		height: 0;
		border-width: 7px;
		border-style: solid;
		border-color: transparent #2196F3 transparent transparent;
		/* 上下左右 */
	}
</style>
<div class="arrow"></div>

这样隐藏的border仍占据空间，要想三角形尺寸最小，可以设置border-width: 7px 7px 7px 0px

2、绘制气泡框

在这里插入图片描述

<style>
.box{
	position: absolute;
	top: 4px;
	left: 102px;
	z-index: 8;
	font-size: 12px;
	width: 212px;
	height: 22px;
	padding: 6px 8px;
	background: rgba(15, 15, 15, 0.8);
	border-radius: 4px;
	line-height: 22px;
	color: #fff;
	padding-left: 15px;
}
.arrow{
	position: absolute;
	top: 8px;
	left: -40px;
	width: 0;
	height: 0;
	border-width: 7px 7px 7px 0;
	border-style: solid;
	border-color: transparent rgba(15, 15, 15, 0.8) transparent transparent;
}
</style>
<div class="box">
	<span class="arrow"></span>
	博客新增高级设置，欢迎试用👏
</div>