css三角形对话框

最新推荐文章于 2022-12-13 09:48:57 发布

骑上北极熊去驰骋沙场吧

最新推荐文章于 2022-12-13 09:48:57 发布

阅读量302

点赞数

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/xin00guang/article/details/80374124

版权

html+css 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .base {
            position: relative;
            width: 40px;
            height: 20px;
        }
        .base span {
            position: absolute;
            display: block;
        }
        .tri {
            top: 30px;
            left: 80px;
            width: 0;
            height: 0;
            font-size: 0;
            border-left: 50px solid transparent;   //transparent设置透明;
            border-right: 50px solid transparent;
            border-bottom: 70px solid #ccc;
            overflow:hidden; 
        }
        .rect { 
            top: 100px;
            width: 200px;
            height: 50px;
            background: #fc0;
        }
    </style>
</head>
<body>
    <span class="base">
        <span class="tri"></span>
        <span class="rect"></span>
    </span>
</body>
</html>