console
<body>
<p>基本原理展示</p>
<div id="box1"></div>
<p>设置透明隐藏边框达到三角形效果</p>
<div id="box2"></div>
<p>CSS “边框法”实现气泡对话框效果一</p>
<div id="montage">
<span id="bot"></span>
<span id="top"></span>
CSS “边框法”实现气泡对话框效果一
</div>
</body>
html, body, div, span {margin: 0; padding:0; }
#montage{width:300px;margin-left: 40px; background:#f0f; position:relative; line-height: 80px; }
#montage span{position:absolute;}
#bot{border-width:20px; border-style:solid; border-color:#fff #f0f #f0f #fff; left:-40px; top:40px; }
#top{border-width:10px 20px; border-style:solid; border-color:transparent #fff #fff transparent; left:-40px; top:60px; }
#box1 {border: 50px solid; border-color: red yellow blue green; width: 0; }
#box2 {border: 50px solid; border-color: red transparent transparent transparent; width: 0; }