直接上代码:(宽 高 三角偏移量 圆角)
// 信息提示框
function topTooltipPath (width, height, offset, radius) {
const left = -width / 2;
const right = width / 2;
const top = -offset - height;
const bottom = -offset;
return `M 0,0
L ${-offset},${bottom}
H ${left + radius}
Q ${left},${bottom} ${left},${bottom - radius}
V ${top + radius}
Q ${left},${top} ${left + radius},${top}
H ${right - radius}
Q ${right},${top} ${right},${top + radius}
V ${bottom - radius}
Q ${right},${bottom} ${right - radius},${bottom}
H ${offset}
L 0,0 z`;
}
function bottomTooltipPath (width, height, offset, radius) {
const left = -width / 2;
const right = width / 2;
const bottom = offset + height;
const top = offset;
return `M 0,0
L ${-offset},${top}
H ${left + radius}
Q ${left},${top} ${left},${top + radius}
V ${bottom - radius}
Q ${left},${bottom} ${left + radius},${bottom}
H ${right - radius}
Q ${right},${bottom} ${right},${bottom - radius}
V ${top + radius}
Q ${right},${top} ${right - radius},${top}
H ${offset}
L 0,0 z`;
}