Arrow in Bottom of jQuery Dialog

后端 未结 3 1272
再見小時候
再見小時候 2021-01-18 16:02

I\'m using jQuery Dialog and i need to show an arrow tip on bottom center of jQuery Dialog like below.

3条回答
  •  失恋的感觉
    2021-01-18 16:50

    One idea is to use the ::after and ::before pseudo-elements to place 2 CSS triangles (see How do CSS triangles work?) over the top of each other, one white and one grey in order to create a triangle outline. Also need to allow the shapes to be visible "outside" of the .ui-dialog so I added overflow:visible; to that selector - 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;
    }
    

    Note: This is similar to how it is done in Google Calendar, but instead Google use 2 x

提交回复
热议问题