CSS从三角形到聊天气泡框

时间 2021-01-02 标签 css 气泡三角形

前言

之前博客里写过一篇关于CSS绘制各种形状的文章，当时也是边看书编写的，看到这次读书笔记第3节又看到如何画三角形的的技巧，我们索性就回顾一下。

思考与实践

怎么快速想起来三角形的css，首先就要想起那个4个长梯形围成的正方形：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三角形与聊天气泡框</title>
    <style> .container{ padding: 50px; } .triangle-origin{ width: 100px; height: 100px; background: salmon; border-top:100px solid lightblue; border-left:100px solid lightgreen; border-bottom: 100px solid lightblue; border-right: 100px solid lightgreen; } </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="triangle-origin">
            </div>
        </div>

    </div>
</body>

然后我们自然会想到把中间的小方块去掉（宽度变成0）是不是就变成4个三角形头对头了呢？

我们只想要一个，那如果把上左右的border都去掉是什么样子？发现把左右上边框去掉，整个图形都不见了，为什么会这样呢？边框都在，则css会自动权重为1，所以虽然没有中间的div，大家相互依托，
起码有立足之处，其它边框删掉，中间div也没有，下边框也就不存在了，爱信不信，仅供参考。

所以可以试着保留相邻的边框，只删上边框：

发现竟然可行，其他两边的我们通过透明度把它隐藏掉就可以了,背景色也一起隐藏掉；

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三角形与聊天气泡框</title>
    <style> .container{ padding: 50px; } .triangle-origin{ width: 0; height: 0; background: salmon; border-left:100px solid rgba(0,0,0,0); border-bottom: 100px solid rgba(0,0,0,0); border-right: 100px solid lightgreen; } </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="triangle-origin">
            </div>
        </div>

    </div>
</body>

大功告成，如果你完整看到这里，什么上下左右正斜的三角都不是问题，改改各边长宽总有你想要的效果。

聊天气泡框

知道三角形的画法，这个就不是事了，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三角形与聊天气泡框</title>
    <style> .container{ padding: 50px; } .wrapper{ margin-bottom: 40px; } .triangle-origin{ /* width: 100px; height: 100px; */ width: 0; height: 0; background-color: transparent; /* border-top:100px solid lightblue; */ border-left:100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid lightblue; } .msg{ width: 300px; height: 80px; line-height: 80px; border: 1px solid lightgreen; position: relative; padding-left: 20px; border-radius: 10px; filter: drop-shadow(0 0 2px #999); background: #fff; } .msg::before{ content: ''; position: absolute; left: -10px; top: 44px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right:10px solid lightgreen; } .msg::after{ content: ''; position: absolute; left: -8px; top: 44px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right:10px solid #fff; } </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="triangle-origin">
            </div>
        </div>
        <div class="wrapper">
            <div class="msg">
                要分清伪元素和伪类哦！
            </div>
        </div>
    </div>
</body>
</html>

下次就写伪元素和伪类吧，就这么愉快地决定了。