5

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

千升

我怎样才能做到这一点 ？

4

3 回答 3

4

一个想法是使用::after和::before伪元素将 2 个 CSS 三角形（请参阅CSS 三角形如何工作？）放在彼此的顶部，一个白色和一个灰色，以创建三角形轮廓。还需要允许形状在“外部”可见，.ui-dialog所以我添加overflow:visible;到该选择器中 -请参阅演示。

.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 日历中的操作方式，但 Google 使用 2 x<div>

于 2013-07-16T10:22:01.457 回答
0

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

在这两种情况下，您都可以将其放置在绝对位置以将其固定在底部。

对于 CSS3 选项，使用bottom: -Npx;where N is (side * sqrt(2) / 2) 和相同的left:

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

于 2013-07-16T09:43:46.243 回答
0

您可以复制其中一个，并将它们用作代码中的文本，然后将其放置在中心。: Ʌ, ˄, ᴧ, ↑, ▲</p>

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

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

于 2013-07-16T09:52:16.497 回答