jQuery对话底部的箭头

Question

我正在使用jQuery Dialog,我需要在下面的中心显示一个箭头提示jQuery Dialog.

我怎样才能做到这一点 ？

Answer 1

一种想法是使用::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>