jquery - jQuery 对话框底部的箭头

Question

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

我该怎么做？

Answer 1

一个想法是使用 ::after和 ::before伪元素将 2 个 CSS 三 Angular 形(请参阅 How do CSS triangles work?)彼此重叠放置，一个白色和一个灰色以创建三 Angular 形轮廓。还需要允许形状在 .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 日历中的做法类似，但 Google 使用 2 x <div>