css制作tips提示框，气泡框，制作三角形的实现纯CSS实现气泡对话框尖角处理方案CSS3制作气泡对话框的实例教程可自定义箭头样式的CSS3气泡提示框纯CSS实现聊天框小尖角、气泡效果纯CSS实现箭头、气泡让提示功能具有三角形图标html5 css3 动态气泡按钮实例演示

 .triangle{ border-top:20px solid red; width:50px; height:50px; border-right:20px solid blue; border-bottom:20px solid gray; border-left:20px solid green; }

 .triangle{ border-top:20px solid red; width:0px; height:0px; border-right:20px solid blue; border-bottom:20px solid gray; border-left:20px solid green; }

 .triangle{ border-top:20px solid transparent; width:0px; height:0px; border-right:20px solid transparent; border-bottom:20px solid gray; border-left:20px solid transparent; }

 .container{ position:relative; margin-top:50px; padding:6px 12px; color:#fff; font-size:16px; line-height:25px; width:200px; height:50px; background-color:orange; border-radius:4px; } p.container:after{ position:absolute; top:-40px; right:20px; border-top:20px solid transparent; content:" "; // content 不要漏了，漏了会显示不出来 width:0px; height:0px; border-right:20px solid transparent; border-bottom:20px solid orange; border-left:20px solid transparent; } 
 hi，这篇文章要教大家怎么使用css制作气泡框。