jQuery对话底部的箭头

Question

我正在使用jQuery Dialog，我需要在jQuery Dialog的底部中心显示一个箭头提示，如下所示。

我该怎么做？

Answer 1

一个想法是使用::after和::before伪元素将2个CSS三角形（请参阅How do CSS triangles work?）放在彼此的顶部，一个白色和一个灰色按顺序排列创建三角形轮廓。还需要允许形状在.ui-dialog的“外部”可见，因此我将overflow:visible;添加到该选择器 - see demo。

.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 150px;
    border-style: solid;
    border-width: 10px;
}

.ui-resizable-handle.ui-resizable-s::before {
    border-color: #aaa transparent transparent transparent;
    top: 2px;
}

.ui-resizable-handle.ui-resizable-s::after {
    border-color: #fff transparent transparent transparent;
    top: 1px;
}

.ui-dialog {
    overflow:visible;
}

注意：这类似于在Google日历中完成的方式，而是谷歌使用2 x <div>

Answer 2

你可以使用CSS3创建一个45度旋转的平方或一个带有旋转方形的png图像。

在这两种情况下，你都可以将它放在绝对位置，以便将它粘在底部。

对于CSS3选项，使用bottom: -Npx;，其中N是（side * sqrt（2）/ 2），left:

相同

对于图像选项，请使用宽度/高度的一半而不是该计算。

Answer 3

您可以复制其中一个，并在代码中将其用作文本，然后将其置于中心位置。 ：Ʌ,,ᴧ，↑，▲

（确保编辑器的编码为UTF-8）

如果您需要更多字符，可以在字符映射中找到它们，如果您使用的是Windows。