CSS带三角汽泡框在线生成
轻松创建各种样式的带三角汽泡框，自定义颜色、大小、三角位置和圆角，实时预览并复制代码。
样式设置
100px
200px
500px
50px
100px
300px
0px
6px
20px
实时预览
汽泡内容
CSS代码
.bubble {
position: relative;
width: 200px;
height: 100px;
background: #165DFF;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.bubble::after {
content: '';
position: absolute;
left: 50%;
top: -8px;
transform: translateX(-50%);
border-width: 0 8px 8px;
border-style: solid;
border-color: transparent transparent #165DFF;
}
使用说明
1. 使用左侧控制面板调整汽泡框的各项参数，包括尺寸、圆角、三角位置和颜色。
2. 中间区域实时显示您设置的汽泡框效果，可以直观地看到样式变化。
3. 右侧自动生成对应的CSS代码，点击"复制CSS代码"按钮即可将代码复制到剪贴板。
4. 将复制的代码粘贴到您的项目中，根据需要修改类名和内容即可使用。