我正在使用jQuery Dialog,我需要在jQuery Dialog的底部中心显示一个箭头提示,如下所示.
我怎样才能做到这一点 ？
最佳答案
一个想法是使用:: after和:: before伪元素将2个CSS三角形(见How do CSS triangles work?)放在彼此的顶部,一个白色和一个灰色以创建三角形轮廓.还需要允许形状在.ui-对话框的“外部”可见,所以我添加了溢出：可见;到那个选择器 – 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>
