利用css实现聊天气泡

最新推荐文章于 2024-04-22 15:22:18 发布

安小漠HG

最新推荐文章于 2024-04-22 15:22:18 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用css实现聊天气泡
这里写图片描述

方法一

利用border属性实现


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现气泡</title>
    <style>
        .message-box {
            position:relative;
            width:240px;
            height:60px;
            line-height:60px;
            background:#E9FBE4;
            box-shadow:1px 2px 3px #E9FBE4;
            border:1px solid #C9E9C0;
            border-radius:4px;
            text-align:center;
        }
        .triangle-border {
            position:absolute;
            left:30px;
            overflow:hidden;
            width:0;
            height:0;
            border-width:10px;
            border-style:solid dashed dashed dashed;
        }
        .tb-border1 {
            top:60px;
            border-color:#C9E9C0 transparent transparent transparent;
        }
        .tb-background1 {
            top:59px;
            border-color:#E9FBE4 transparent transparent transparent;
        }
    </style>
</head>
<body>
<div class="message-box">
    <span>利用 border 属性实现的</span>
    <div class="triangle-border tb-border1"></div>
    <div class="triangle-border tb-background1"></div>
</div>

</body>
</html>

方法二

利用◆字符来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现气泡</title>
    <style>
        .message-box {
            position:relative;
            width:240px;
            height:60px;
            line-height:60px;
            background:#E9FBE4;
            box-shadow:1px 2px 3px #E9FBE4;
            border:1px solid #C9E9C0;
            border-radius:4px;
            text-align:center;
        }

        .triangle-character {
            position:absolute;
            left:30px;
            overflow:hidden;
            width:20px;
            height:20px;
            font:normal 20px "宋体"; // 字符的大小和字体也有关系哦！
        }
        .tc-border2 {
            top:50px;
            color:#C9E9C0;
        }
        .tc-background2 {
            top:49px;
            color:#E9FBE4;
        }
    </style>
</head>
<body>

<div class="message-box">
    <span>利用 ◆ 字符实现的</span>
    <div class="triangle-character tc-border2">◆</div>
    <div class="triangle-character tc-background2">◆</div>
</div>


</body>
</html>

方法三

利用css3的transform实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现气泡</title>
    <style>
        .message-box {
            position:relative;
            width:240px;
            height:60px;
            line-height:60px;
            background:#E9FBE4;
            box-shadow:1px 2px 3px #E9FBE4;
            border:1px solid #C9E9C0;
            border-radius:4px;
            text-align:center;
        }

        .triangle-css3 {
            position:absolute;
            top:55px;
            left:30px;
            overflow:hidden;
            width:10px;
            height:10px;
            background:#E9FBE4;
            border-bottom:1px solid #C9E9C0;
            border-right:1px solid #C9E9C0;
        }
        .transform {
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }
    </style>
</head>
<body>

<div class="message-box">
    <span>利用 css transfrom </span>
    <div class="triangle-css3 transform"></div>
</div>
</body>
</html>

安小漠HG

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用css实现聊天气泡

利用css实现聊天气泡方法一利用border属性实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css实现气泡</title> <style> .message-box { position:relative;
复制链接

扫一扫