对话框的实现

àì夳堔傛蜴生んèń 2022-12-06 15:18 110阅读 0赞

<html>
    
    <head>
        <title>对话框</title>
        <style type="text/css">
            * { 
                margin: 0;
                padding: 0;
            }
    
            .div-mid { 
                margin: 0 auto;
                width: 800px;
                height: 600px;
            }
    
            .div-diabox { 
                width: 200px;
                border-style: solid;
                border-width: 1px;
                border-radius: 10px;
                border-color: #CCCC33;
                background-color: #FFFF99;
                position: relative;
                margin: 0 auto;
                padding: 30px;
                top: 30px;
            }
    
            .div-diabox .arrow-bottom-out { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: #CCCC33 transparent transparent transparent;
                border-width: 10px;
                position: absolute;
                top: 79px;
                left: 10px;
            }
    
            .div-diabox .arrow-bottom-in { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: #FFFF99 transparent transparent transparent;
                border-width: 10px;
                position: absolute;
                top: 78px;
                left: 10px;
            }
    
            .div-diabox .arrow-top-out { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent transparent #CCCC33 #CCCC33;
                /* border-width: 10px; */
                position: absolute;
                top: -17px;
                left: 10px;
                border-left-width: 6px;
                border-right-width: 6px;
                border-bottom-width: 8px;
                border-top-width: 8px;
            }
    
            .div-diabox .arrow-top-center { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent transparent #CCCC33 #CCCC33;
                position: absolute;
                top: -17px;
                left: 11px;
                z-index: 1;
                border-left-width: 6px;
                border-right-width: 6px;
                border-bottom-width: 8px;
                border-top-width: 8px;
            }
    
            .div-diabox .arrow-top-in { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent transparent #FFFF99 #FFFF99;
                position: absolute;
                top: -15px;
                left: 11px;
                z-index: 2;
                border-left-width: 6px;
                border-right-width: 6px;
                border-bottom-width: 8px;
                border-top-width: 8px;
            }
    
            .div-diabox .arrow-top-out-right { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent yellow green transparent;
                /* border-width: 10px; */
                position: absolute;
                top: -17px;
                left: 10px;
                border-left-width: 6px;
                border-right-width: 6px;
                border-bottom-width: 8px;
                border-top-width: 8px;
            }
    
            .div-diabox .arrow-top-center-right { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent yellow green transparent;
                position: absolute;
                top: -17px;
                left: 11px;
                z-index: 1;
                border-left-width: 6px;
                border-right-width: 6px;
                border-bottom-width: 8px;
                border-top-width: 8px;
            }
    
            .div-diabox .arrow-top-in-right { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent yellow green transparent;
                position: absolute;
                top: -15px;
                left: 11px;
                z-index: 2;
                border-left-width: 6px;
                border-right-width: 6px;
                border-bottom-width: 8px;
                border-top-width: 8px;
            }
    
            .div-diabox .arrow-right-out { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent transparent transparent #CCCC33;
                border-width: 10px;
                position: absolute;
                top: 10px;
                right: -20px;
            }
    
            .div-diabox .arrow-right-in { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent transparent transparent #FFFF99;
                border-width: 10px;
                position: absolute;
                top: 10px;
                right: -19px;
            }
    
            .div-diabox .arrow-left-out { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent #CCCC33 transparent transparent;
                border-width: 10px;
                position: absolute;
                top: 10px;
                left: -20px;
            }
    
            .div-diabox .arrow-left-in { 
                width: 0px;
                height: 0px;
                border-style: solid;
                border-color: transparent #FFFF99 transparent transparent;
                border-width: 10px;
                position: absolute;
                top: 10px;
                left: -19px;
            }
        </style>
    </head>
    
    <body>
        <div class="div-mid">
            <div class="div-diabox">
                <span class="arrow-bottom-out"></span>
                <span class="arrow-bottom-in"></span>
                雷猴码
            </div>
            <br />
            <br />
            <div class="div-diabox">
                <span class="arrow-top-out"></span>
                <span class="arrow-top-in"></span>
                <span class="arrow-top-center"></span>
                雷猴码
            </div>
            <br />
            <br />
            <div class="div-diabox">
                <span class="arrow-top-out-right"></span>
                <span class="arrow-top-in-right"></span>
                <span class="arrow-top-center-right"></span>
                雷猴码
            </div>
            <br />
            <br />
            <div class="div-diabox">
                <span class="arrow-right-out"></span>
                <span class="arrow-right-in"></span>
                雷猴码
            </div>
            <br />
            <br />
            <div class="div-diabox">
                <span class="arrow-left-out"></span>
                <span class="arrow-left-in"></span>
                雷猴码
            </div>
    
        </div>
    </body>
    
    </html>

本文章为转载文章