【无标题】学习笔记之css-border属性应用

最新推荐文章于 2024-07-20 21:01:09 发布

瞎起个名字吧11

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量85

点赞数

文章标签： CSS 对话泡泡边框样式 position:absolute 透明边框

本文链接：https://blog.csdn.net/qq_41924007/article/details/128054769

版权

边框三角形

使用css边框属性制作一个对话泡泡

<style>
        .popo{
            width: 200px;
            height: 50px;
            background-color: #aaa;
            border-radius: 5px;
            
        }
        .box{
            width: 0px;
            height: 0px;
            border-style:solid;
            border-width: 20px;
            border-color: transparent;
            /* 边框颜色透明 */
            border-top-color: #aaa;
            position: absolute;
            /* 自由定位 */
            top: 58px;
            left: 12px;
        }
        p{
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div class="popo">
        <div class="box"></div>
        世上本没有路，走的人多了就变成了路。
    </div>
    <p>鲁迅说</p>