本文介绍使用 CSS radial-gradient 实现带圆角尖角的对话框气泡，替代传统直角三角形箭头，使 UI 更柔和自然，适用于聊天界面等场景。
本文介绍使用 css radial-gradient 实现带圆角尖角的对话框气泡，替代传统直角三角形箭头，使 ui 更柔和自然，适用于聊天界面等场景。
在现代 Web 应用中，尤其是即时通讯类 UI，对话气泡（chat bubble）的视觉细节直接影响用户体验。常见的“直角三角形”指向箭头（如通过 border 技巧实现）虽简单，但缺乏圆润感，与整体圆角设计风格不协调。要实现如题图所示的右上角带圆弧过渡的三角形指示器（即“圆角三角形对话框”），关键在于放弃 border 伪元素硬边方案，转而采用更灵活、可精确控制曲率的 radial-gradient 背景绘制法。
以下是推荐实现方案：
.big {
--bg-color: #000000;
width: 300px;
height: 80px;
background-color: var(--bg-color);
filter: drop-shadow(0 0 4px rgba(0, 0, 0, .3));
position: relative;
border-radius: 6px;
/* 关键：取消右上角圆角，为渐变预留直角锚点 */
border-top-right-radius: 0;
}
.big::after {
content: '';
position: absolute;
top: 0;
right: 0;
transform: translateX(100%); /* 将伪元素完全移出容器右侧 */
width: 50px; /* 控制箭头宽度（建议设为固定值或基于容器计算） */
height: 50px; /* 高度需与 width 一致，保证正圆 */
background-image: radial-gradient(
farthest-side at bottom right,
transparent 100%,
var(--bg-color) calc(100% + 1px)
);
/* 确保背景仅渲染所需区域，避免溢出 */
background-size: contain;
background-repeat: no-repeat;
}<div class="big"></div>
✅ 原理说明：radial-gradient(farthest-side at bottom right, ...) 在伪元素右下角创建一个半径延伸至最远边的圆形渐变。通过设置 transparent 100% 和 color calc(100% + 1px)，我们仅保留圆周外缘极窄的一圈实色像素——这恰好形成一个平滑的四分之一圆弧尖角，视觉上即为“圆角三角形”的顶点。
⚠️ 注意事项：
-
width/height必须相等（推荐50px），否则aspect-ratio: 1/1不生效，弧度会失真； -
border-top-right-radius: 0是必需的，确保容器右上角为直角，使渐变起始点精准对齐； - 若需适配深色/浅色主题，推荐统一使用 CSS 自定义属性（如
--bg-color），便于全局维护； -
filter: drop-shadow()比box-shadow更适合复合形状，阴影不会被border-radius截断。
? 进阶提示：
如需支持左右对话方向（如用户消息靠右、系统消息靠左），可为 .big.left 添加对应规则，将 ::after 改为 left: 0; transform: translateX(-100%); 并调整 radial-gradient 的 at top left 锚点。
该方案兼容所有现代浏览器（Chrome 93+、Firefox 87+、Safari 15.4+），无需 JavaScript，纯 CSS 实现，轻量且高性能。
