我正在使用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>
