CSS带三角汽泡框生成工具
轻松创建各种样式的带三角汽泡框，自定义颜色、大小和方向，一键获取CSS代码
4.1 / 5
基于189次投票
预览
这是一个示例汽泡框
尺寸
边角
样式设置
颜色
三角位置
CSS代码
.bubble {
position: relative;
background: #7C3AED;
color: #FFFFFF;
padding: 16px;
border-radius: 8px;
width: 200px;
height: 100px;
}
.bubble::after {
content: '';
position: absolute;
top: 100%;
left: 24px;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: #7C3AED transparent transparent transparent;
}
已复制!
使用说明
调整参数
通过控制面板调整汽泡框的大小、颜色、圆角和三角位置等参数
实时预览
在左侧预览区域实时查看您所设置的汽泡框效果
复制代码
点击复制按钮获取生成的CSS代码，直接应用到您的项目中