前端CSS画图_三角形和提示框

网站前端 快速开发框架
前端开发ui框架
nodejs 开发前端框架

html 代码

<head>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        /*三角形*/
        .triangle {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #40BBF4;
        }
        /*提示框*/
        .msg {
            position: relative;
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px 2px #ccc;
        }
        .msg .triangle {
            position: absolute;
            top: 100%;
            left: calc((100% – 10px) / 2);
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #ccc;
        }
        .msg .triangle:after {
            content: “”;
            position: absolute;
            top: -11px;
            left: -9px;
            width: 0;
            height: 0;
            border: 9px solid transparent;
            border-top-color: white;
        }
    </style>
</head>
<body>
    <!–三角形–>
    <div class=”triangle”></div>
    <!–提示框–>
    <div class=”msg”>
        <div class=”triangle”></div>
    </div>
</body>
php web前端开发框架
asp.net开发前端框架
移动端前端开发框架
» 本文来自:前端开发者 » 《前端CSS画图_三角形和提示框》
» 本文链接地址:https://www.rokub.com/6263.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!