CSS气泡三角形

作者: 爱学习的新一 | 来源:发表于2021-03-09 14:58 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                .one {
                    width: 200px;
                    height: 100px;
                    line-height: 100px;
                    margin: 0 auto;
                    text-align: center;
                    border-radius: 10px;
                    background-color: #1765EB;
                    position: relative;
                    /*子绝父相*/
                }
    
                .one:before {
                    /*伪元素必须添加content*/
                    content: "";
                    width: 0;
                    height: 0;
                    /*IE6下,height:0;不顶用,可使用font-size:0; + overflow:hidden;修复此问题*/
                    font-size: 0;
                    overflow: hidden;
                    display: block;
                    border-width: 10px;
                    border-color: #1765EB transparent transparent transparent;
                    /*为了兼容IE6,所有设置为透明(transparent)的边,需要设置为dashed;有颜色的边设置为solid*/
                    border-style: solid dashed dashed dashed;
                    position: absolute;
                    /*绝对定位不占位置*/
                    top: 100px;
                    /* 向下移动 矩形的高度 + 矩形的上下内边距 + 下边框粗细*/
                    left: 45%;
                    /*相对于矩形宽度的位置*/
                }
            </style>
        </head>
        <body>
            <div class="one">三角形在底部的对话框</div>
        </body>
    </html>
    
    

    相关文章

      网友评论

        本文标题:CSS气泡三角形

        本文链接:https://www.haomeiwen.com/subject/edqbqltx.html