美文网首页
纯css写出小三角和气泡对话框

纯css写出小三角和气泡对话框

作者: 柏龙 | 来源:发表于2017-04-10 15:39 被阅读0次

    小三角代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .common-div{
                width: 0;
                height: 0;
                margin: 20px;
            }
            .div1{
                border-top: 25px solid blue;
                border-left: 25px solid red;
                border-right: 25px solid yellow;
                border-bottom: 25px solid green;
            }
            .div2{
                border-top: 25px solid blue;
                border-left: 25px solid transparent;
                border-right: 25px solid transparent;
                border-bottom: 25px solid transparent;
            }
            .div3{
                border-top: 25px solid transparent;
                border-left: 25px solid red;
                border-right: 25px solid transparent;
                border-bottom: 25px solid transparent;
            }
            .div4{
                border-top: 25px solid transparent;
                border-left: 25px solid transparent;
                border-right: 25px solid yellow;
                border-bottom: 25px solid transparent;
            }
            .div5{
                border-top: 25px solid transparent;
                border-left: 25px solid transparent;
                border-right: 25px solid transparent;
                border-bottom: 25px solid green;
            }
            .div6{
                border-top: 25px solid transparent;
                border-left: 25px solid red;
                border-right: 25px solid transparent;
                border-bottom: 25px solid red;
            }
            .div7{
                border-top: 25px solid transparent;
                border-left: 25px solid transparent;
                border-right: 25px solid green;
                border-bottom: 25px solid green;
            }
        </style>
    </head>
    <body>
        <div class="common-div div1"></div>
        <div class="common-div div2"></div>  
        <div class="common-div div3"></div>
        <div class="common-div div4"></div>
        <div class="common-div div5"></div>
        <div class="common-div div6"></div>
        <div class="common-div div7"></div>
    </body>
    </html>
    

    小三角代码在线演示地址

    气泡对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3对话框</title>
        <style>
            .dialog-box {
                width: 200px;
                height: 100px;
                border: 1px solid #ccc;
                position: relative;
                margin-top: 30px;
                background-color: #fff;
            }
            .dialog-box-1 .triangle {
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #ccc;
                border-left: 10px solid transparent;
                position: absolute;
                top: -20px;
                left: 10px;
            }
            .dialog-box-2 .triangle {
                width: 0;
                height: 0;
                border-top: 10px solid red;
                border-right: 10px solid red;
                border-bottom: 10px solid transparent;
                border-left: 10px solid transparent;
                position: absolute;
                top: -1px;
                right: -1px;
            }
            .dialog-box-3 .triangle {
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid #ccc;
                border-left: 10px solid transparent;
                position: absolute;
                top: -20px;
                left: 10px;
            }
            .dialog-box-3 .triangle:after {
                content: "";
                border-top: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #fff;
                border-left: 8px solid transparent;
                position: absolute;
                top: -6px;
                left: -8px;
            }
        </style>
    </head>
    <body>
        <div class="dialog-box dialog-box-1">
            <span class="triangle"></span>
        </div>
        <div class="dialog-box dialog-box-2">
            <span class="triangle"></span>
        </div>
        <div class="dialog-box dialog-box-3">
            <span class="triangle"></span>
      </div>
    </body>
    </html>
    

    气泡对话框在线演示地址

    相关文章

      网友评论

          本文标题:纯css写出小三角和气泡对话框

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