如何将直边三角形对话气泡修改为带圆角的样式？

问题描述 #

我们正在开发一款应用，需在div中展示类似聊天框布局的文本，要求对话气泡带有圆角（需求样式为带圆角的气泡，包含圆角的小尾巴）。目前已实现直边对话框，现有代码如下，当前效果为直边尖角的气泡，需修改代码实现带圆角的对话气泡。

现有代码 #

.big{
    width: 300px;
    height: 80px;
    background-color: #000000;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    position: relative;
    border-radius: 6px;
}
  
.big::after {
    content: '';
    position: absolute;
    visibility: visible;
    top: 0px;
    right: -50px;
    border: 50px solid transparent;
    border-top: 30px solid #000;
    clear: both;
}

解决方案 #

原代码使用border实现的是尖角尾巴，要改成圆角尾巴，可通过矩形元素+旋转+圆角设置的方式实现，同时调整主气泡的圆角让衔接更自然：

修改后的代码 #

.big{
    width: 300px;
    height: 80px;
    background-color: #000000;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    position: relative;
    /* 保持主气泡圆角，与尾巴衔接自然 */
    border-radius: 6px;
}
  
.big::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    /* 定义尾巴的尺寸 */
    width: 24px;
    height: 24px;
    background-color: #000;
    /* 仅设置左下角圆角，旋转后对应尾巴的圆角部分 */
    border-radius: 0 0 0 12px;
    /* 旋转45度，将矩形转为斜向尾巴 */
    transform: rotate(45deg);
    /* 继承主元素阴影，同时裁剪多余阴影避免覆盖主气泡 */
    box-shadow: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

代码说明 #

• 替换原border实现尾巴的逻辑，改用矩形伪元素，通过rotate(45deg)旋转成斜向尾巴。
• 针对性设置圆角，让旋转后的元素呈现出尾巴的圆角效果。
• 用clip-path裁剪伪元素的阴影，避免阴影干扰主气泡的圆角区域。
• 调整定位参数，让尾巴与主气泡右上角完美衔接。

内容的提问来源于stack exchange，提问作者HARDIK GOYAL