气泡盒效果的CSS实现（插图和插图）
前提：泡沫箱或盒是很常见的，有很多的方式去实现它，我们用最常用的是裁剪图片，然后通过定位定位到相应的位置，但维修是很麻烦的，如设计师想变成另一个或另一种颜色，我们只把图片了。在这里，我们学会使用HTML + CSS来达到这一效果！以下结果如下：
我们可以分析它：为了达到这个效果，它只不过是一个矩形和一个小三角形。然后三角定位就可以了。那么我们如何通过CSS制作小三角形呢
首先，让我们来看一下CSS边框属性，当我们用不同的颜色设置div边框颜色时，你可以看到所有的边都是矩形的。
。演示{宽度：50px；身高：50px；边框宽度：50px；边框样式：固体；边框颜色：# CCC # 00f # 933 # 0c9；}
图：
如果继续将div的宽度和高度设置为0，则四个边将变成三角形。
。演示{宽度：0；高度：0；边框宽度：50px；边框样式：实心边框颜色：# CCC；# 00f # 933 # 0c9；}
但IE6下下是一个矩形框的三角形，如下：
实验发现，当字体大小和DIV线高度设置为0，非四方可以在IE6形成完美的三角形：代码如下：
。演示{宽度：0；高度：0；边框宽度：50px；边框样式：固体；边框颜色：# CCC # 00f # 933 # 0c9；线高度：0；字体大小：0；}
是，我们只需要一个三角形，所以我们只需要把其他三边的颜色设置为透明或设置为背景色，同样可以创造一个三角形，另三边的颜色设置为透明，颜色是透明的，如果其他三面相同的网页背景颜色虽然视力只能看到一个三角形，但一旦背景颜色的变化，其他三面也会改变颜色。下面的代码：
。演示{宽度：0；高度：0；边框宽度：50px；边框样式：固体；边框颜色：# CCC透明透明；线高度：0；字体大小：0；}
但在IE6，在IE6不支持透明如下问题：
但是通过边框样式设置为虚线的实验发现，在IE6的其它三方可以是透明的！如下：
或以上代码更改如下：
。演示{宽度：0；高度：0；边框宽度：50px；边框样式：固体虚线虚线虚线；边框颜色：# CCC透明透明；透明；}。
现在我们可以模拟一个小三角形，然后我们可以使用矩形和三角形一起进行演示，以达到上述2个效果。首先，我们设计一个矩形框，在矩形上找到小三角形：
代码如下：
我是龙我在泡沫箱。隆根{位置：相对；宽度：300px；身高：100px；边界：5px固体红；}，{ Longen跨位置：绝对；左：100px；底：- 40px；边框宽度：20px；边框样式：固体虚线虚线；边框颜色：红色透明；字体大小：0；线高度：0；}
现在表示方向的三角形箭头是实心的，我们要的是空心效应。我们再加上一个小的三角形，和泡泡盒子的背景颜色一样，然后把重叠的小三角形移动到一个位置。
首先，您需要调整HTML结构，如下所示
代码如下：
我是龙我在泡沫箱。隆根{位置：相对；宽度：300px；身高：100px；边界：5px固体红；}，{ Longen跨位置：绝对；左：100px；底：- 40px；边框宽度：20px；边框样式：固体虚线虚线；边框颜色：红色透明；字体大小：0；线高度：0；}。隆根EM {位置：绝对；底：- 34px；左：100px；边框宽度：20px；边框样式：固体虚线虚线；边框颜色：# FFF透明；字体大小：0；线高度：0；}
让我们看看第二个不规则的效果。
HTML代码与前一个代码相同：
我是Loong，我在泡沫箱里
CSS更改如下：
。隆根{宽度：300px；身高：100px；位置：相对；背景颜色：红色；保证金：50px汽车0；}
重新定位三角形箭头：
{。箭头位置：绝对；宽度：70px；身高：60px；左：- 70px；底：10px；}
元素的相邻边的边框样式值被设置为实心（显示），而其他边设置为透明（未显示）。
箭头*位置：绝对；边框样式：虚线实心虚线；字体大小：0；行高：0；}
接下来，我们首先模拟一个直角三角形，将一个元素上的相邻颜色设置为相同的值，两边设置为透明的，这样我们就可以得到一个直角：
代码继续添加如下：
。箭EM {边框颜色：透明# 09f # 09f透明；边框宽度：30px 35px；}
如果你继续重叠两个直角三角形，你可以得到一个不规则三角形代码如下：
。矢跨{边框宽度：20px 35px；边框颜色：透明# FFF # FFF透明；下：0；}
这幅不规则的画已经画好了！
完整的代码如下所示：
我是龙我在泡沫箱。隆根{宽度：300px；身高：100px；位置：相对；背景颜色：红色；保证金：50px汽车0；}。箭{位置：绝对；宽度：70px；身高：60px；左：- 70px；底：10px；}。箭头* {位置：绝对的边框样式：破灭；固冲；字体大小：0线高度：0；}。箭EM {边框颜色：透明；# 09f # 09f透明；边框宽度：30px 35px；。矢跨{边框宽度：20px } 35px；边框颜色：透明# FFF # FFF透明底部：0；}；
二：除了通过设置元素的边界模拟小三角形外，还可以用特殊的字符进行模拟。使用特殊的字符来模拟小三角形也需要位置和重叠覆盖，但不需要调整边界属性。
我们先来看一个钻石，它在页中的代码是# 9670，注意网页编码设置为UTF-8的网页，可以把它作为一个文本处理，它可以调整字体大小颜色设置其颜色，大小。
HTML代码如下所示：
# 9670 # 9670我龙我在泡沫箱
首先，设置最外层div样式，并获取矩形框：
代码如下：
。隆根{宽度：300px；身高：100px；位置：相对；边界：5px固体红；保证金：50px汽车0；}
然后找到箭头的最外层容器div，这便于观察，首先设置背景颜色：
{。箭头位置：绝对；宽度：40px；身高：40px；左：100px；底：- 40px；背景：# CCC；溢出：隐藏；}
设置风格：
。箭头* {位置：绝对的；字体大小：40px；线高度：40px；宽度：40px；字体：SimSun；字体：字体：正常；体重正常；文本对齐：中心；垂直对齐方式：居中；}。
图如下：
注意：为了显示相同的主流浏览器，需要清除浏览器的默认字体样式，要特别注意字体设置，然后在这里修改EM，跨标签字体颜色，并且两个标记位置代码如下所示：
颜色：红色，箭头EM {；顶部：- 15px；}，{颜色：矢跨# FFF；顶部：- 21px；}
最终结果如下：
完整的代码如下所示：
# 9670 # 9670我是龙，我在泡沫箱。隆根{宽度：300px；身高：100px；位置：相对；边界：5px固体红；保证金：50px汽车0；}。箭{位置：绝对；宽度：40px；身高：40px；左：100px；底：- 40px；溢出：隐藏；。箭头* {位置：绝对字体大小：40px；}；线高度：40px；宽度：40px；字体：SimSun；字体：字体：正常；体重正常；文本对齐：中心；垂直对齐：中部；}。{颜色：红色箭头EM；顶：- 15px }。矢跨{；颜色：# FFF；顶部：- 21px；}
补充：以上方法在多余的标签的增加达到必然的小三角，如果不需要在所有的浏览器中显示相同的方式，我们可以通过CSS3实现小三角形。CSS3。隆根{宽度：300px高度：100px泡沫箱；边界：5px固体；# 09f；位置：相对；背景颜色：# FFF；。Longen：之前}，{内容：后。Longen：显示：块；；边框宽度：20px；位置：绝对；底部：- 40px；左：100px；边框样式：固体虚线虚线；边框颜色：# 09f透明；字体大小：0；线高度：0；Longen：后{底：- 33px边框颜色：# FFF透明透明；} }；
效果和上面一样，我也是通过谷歌自己的研究做的。演示真的很好，所以我分享它。如果分析不清楚，请大家赐教，我的能力暂时受限！