Popover（气泡弹出框/弹出式气泡/气泡）是由一个矩形和三角箭头组成的弹出窗口，箭头指向的地方通常是导致Popover弹出的控件或区域。通过点击Popover内的按钮或非Popover的屏幕其他区域可关闭Popover。
首先实现基本的HTML结构
<body>
<div class="box">
<div>
hello world
</div>
</div>
</body>给矩形添加样式
.box {
width: 200px;
height: 100px;
background: #fff;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
position: relative;
padding: 10px;
}给三角箭头添加样式，为了实现三角形我这边先用正方形实现了。
.box::before {
transform: matrix(.71,.71,-.71,.71,0,0);
width: 8px;
height: 8px;
display: block;
content: '';
background: #fff;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
position: absolute;
top: -4px;
left: 42px;
}
由于是个旋转之后的正方形，所以我得想办法把多余的部分遮挡住才可以。
.box::after {
display: block;
content: '';
height: 10px;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background: #fff;
}CSS 函数 matrix()
CSS函数matrix()是一个用于进行2D变换的函数。它接受六个参数，表示一个2D变换矩阵的值。这些参数的含义如下：
1.a：表示水平缩放的值。2.b：表示水平倾斜的值。3.c：表示垂直倾斜的值。4.d：表示垂直缩放的值。5.e：表示水平移动的值。6.f：表示垂直移动的值。
这些参数可以用来创建各种2D变换效果，如缩放、旋转、倾斜和平移。下面是一些示例：
1、 缩放：通过调整a和d参数的值，可以实现水平和垂直方向上的缩放。例如，matrix(2, 0, 0, 2, 0, 0)将元素在水平和垂直方向上放大两倍。
2、 旋转：通过调整a、b、c和d参数的值，可以实现元素的旋转效果。例如，matrix(cos(45deg), sin(45deg), -sin(45deg), cos(45deg), 0, 0)将元素顺时针旋转45度。
3、 倾斜：通过调整b和c参数的值，可以实现元素的倾斜效果。例如，matrix(1, 0.5, 0.5, 1, 0, 0)将元素在水平和垂直方向上倾斜。
4、 平移：通过调整e和f参数的值，可以实现元素的平移效果。例如，matrix(1, 0, 0, 1, 100, 100)将元素向右平移100个像素，向下平移100个像素。
可以将matrix()函数应用于元素的transform属性来实现相应的变换效果。例如：
.element {
transform: matrix(1, 0, 0, 1, 100, 100);
}上述代码将元素向右平移100个像素，向下平移100个像素。
需要注意的是，matrix()函数是一个2D变换函数，如果需要进行3D变换，可以使用matrix3d()函数。
希望这个解释能帮助到你理解CSS函数matrix()的用法和效果。
扫一扫
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
