纯CSS实现聊天框小尖角、气泡效果

让我们来讲解如何用纯CSS实现聊天框小尖角和气泡效果。整个过程可以分为以下几步：

1. 创建一个聊天框容器：我们可以使用一个div元素作为聊天框的容器，并设置它的宽度、高度、背景颜色、边框等属性。

<div class="chat-box">
    <p>This is a message!</p>
</div>

.chat-box {
    position: relative;
    max-width: 240px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
}

1. 添加小尖角：我们可以使用CSS的伪元素before或after来创建小三角形，将其放置在聊天框上方或下方。在此之前，我们需要先将聊天框容器设置为相对定位，以便能够通过设置伪元素的绝对位置来调整小三角形位置。

.chat-box {
    position: relative;
    max-width: 240px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
}

.chat-box:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 10px;
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 10px solid transparent;
}

.chat-box:after {
    content: '';
    position: absolute;
    top: -11px;
    left: 8px;
    border-top: 11px solid transparent;
    border-right: 11px solid #bbb;
    border-bottom: 11px solid transparent;
}

上面的代码会在聊天框上方添加一个白色小三角形，下方添加一个灰色小三角形。

1. 完成气泡效果：接下来，我们需要将小尖角与聊天框进行合并，以实现气泡效果。这可以通过调整伪元素的位置和背景颜色来完成。

.chat-box {
    position: relative;
    max-width: 240px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
}

.chat-box:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 10px;
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 10px solid transparent;
}

.chat-box:after {
    content: '';
    position: absolute;
    top: -11px;
    left: 8px;
    border-top: 11px solid transparent;
    border-right: 11px solid #bbb;
    border-bottom: 11px solid transparent;
}

.chat-box p {
    margin: 10px;
}

.chat-box.left:before {
    transform: scaleX(-1);
    left: -10px;
}

.chat-box.left:after {
    transform: scaleX(-1);
    left: -8px;
    border-right: 11px solid #fff;
    border-left: 11px solid #bbb;
}

.chat-box.left {
    text-align: left;
}

.chat-box.right {
    text-align: right;
}

.chat-box.right:before {
    transform: scaleX(1);
    right: -10px;
    border-right: 10px solid #fff;
    border-left: 10px solid transparent;
}

.chat-box.right:after {
    transform: scaleX(1);
    right: -8px;
    border-right: 11px solid #fff;
    border-left: 11px solid transparent;
}

上面的代码可以实现左侧和右侧聊天框的气泡效果。

以下是一个完整的示例，可以参考实现气泡的效果：

<div class="chat-box left">
    <p>Hello World!</p>
</div>

<div class="chat-box right">
    <p>Hi there!</p>
</div>

.chat-box {
    position: relative;
    max-width: 240px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
}

.chat-box:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 10px;
    border-top: 10px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 10px solid transparent;
}

.chat-box:after {
    content: '';
    position: absolute;
    top: -11px;
    left: 8px;
    border-top: 11px solid transparent;
    border-right: 11px solid #bbb;
    border-bottom: 11px solid transparent;
}

.chat-box p {
    margin: 10px;
}

.chat-box.left:before {
    transform: scaleX(-1);
    left: -10px;
}

.chat-box.left:after {
    transform: scaleX(-1);
    left: -8px;
    border-right: 11px solid #fff;
    border-left: 11px solid #bbb;
}

.chat-box.left {
    text-align: left;
}

.chat-box.right {
    text-align: right;
}

.chat-box.right:before {
    transform: scaleX(1);
    right: -10px;
    border-right: 10px solid #fff;
    border-left: 10px solid transparent;
}

.chat-box.right:after {
    transform: scaleX(1);
    right: -8px;
    border-right: 11px solid #fff;
    border-left: 11px solid transparent;
}

希望这篇文章对你有所帮助！