CSS三角形箭头的应用实践

本文主要介绍CSS三角形箭头的应用，主要分为对话框箭头和下拉菜单箭头。
使用CSS没有画带箭头的div框（此代码更适合纯净的纯代码）
这种效果也可以用图片背景来实现，而且代码会更加简洁。
CSS代码：

CSS代码将内容复制到剪贴板。
div.container {绝对位置；
上图：30px；
左：40px；
字体大小：9pt；
显示块；
身高：100px；
宽度：200px；
背景颜色：透明；
*边框1px solid # 666；
}
的{
位置：绝对；
上图：- 20px；
*前：- 22px；
左：20px；
显示块；
身高：0；
宽度：0；
字体大小：0；
线高度：0；
边框颜色：透明# 666透明；
边框样式：虚线实心虚线；
边框宽度：10px；
}
{位置：绝对；
上图：- 9px；
*前：- 9px；
左：- 10px；
显示块；
身高：0；
宽度：0；
字体大小：0；
线高度：0；
边框颜色：透明# FFF透明；
边框样式：虚线实心虚线；
边框宽度：10px；
}
内容{。
边境：1px solid # 666；
-moz边界半径：3px；
WebKit的边界半径：3px；
位置：绝对；
背景颜色：# FFF；
宽度：100%；
身高：100%；
填料：5px；
*top:-2px;
*边界上：1px solid # 666；
*边界上：1px solid # 666；
*左边框：无；
*边界权：无；
*高度：102px；
盒子的影子：3px 3px 4px # 999；
-moz盒阴影：3px 3px 4px # 999；
Webkit框阴影：3px 3px 4px # 999；
IE浏览器5.5 - 7
过滤器：ProgID：DXImageTransform.Microsoft.Shadow（强度= 4 = 135，方向，颜色=999999#）；
对于IE 8
MS过滤器：ProgID：DXImageTransform.Microsoft.Shadow（强度= 4 = 135，方向，颜色=# 999999'）；
}

HTML代码：

xml代码将内容复制到剪贴板。

这是在框的文本，可以动态显示。自动高度增加，^ _ ^应该不错。

设计素描 uff1a
这是CSS的引入，用来制作三角形箭头。
通常，当我们做上面的三角形时，我们通常做绘图，我们需要两块，因为它们通常是下拉菜单的效果，所以我们需要一个悬停样式，箭头是相反的。有没有更好的方法毕竟，我们需要用两张图片来解决这样一个小问题，这是在浪费资源。接下来，我想用纯CSS方法来解决这个问题，它只使用CSS的一个属性，即边框宽度。

让我们先看看样式，如果设置了元素边界该怎么办：
我好像什么也看不见。让我给四帧加上不同的颜色，再看一遍。
你发现了什么是的，让我们去掉中间词：
这样，有4个三角形。然后，如果我们需要顶部三角形，我们只需要设置边框的左、右和底为背景色。
这样，我们需要的三角形出现了，我们可以设置4个不同的方向：
样式代码很简单，只是几个字：

CSS代码将内容复制到剪贴板。
浮点数：左；
边框样式：固体；边框宽度：10px；
边框颜色：# 000 # CCC # CCC # CCC；
身高：0；
宽度：0；
字体大小：0；

实际应用

例如，我们要使用向下箭头（兼容IE6写）

HTML代码：

xml代码将内容复制到剪贴板。

CSS代码：

CSS代码将内容复制到剪贴板。
演示{位置：相对}
bottombottom箭{。
位置：绝对；
上图：10px；
左：0px；
边框样式：实心；
边框宽度：100px；
边框颜色：# 000000透明透明； / *设置边框的颜色。
身高：0；
宽度：0；
字体大小：0；
_border-color：# 000000番茄番茄IE6 * / / *透明边框的颜色；
_filter：色度（颜色=番茄）； / * * /框架对IE6的透明色
}

解释uff1a
这里演示的是使用边框透明的颜色。如果你不能用透明、设置边框颜色直接到你需要的颜色，避免过滤IE6透明边框。
色度属性可以将对象中指定的颜色设置为透明的，其表达式如下所示：
CSS代码将内容复制到剪贴板。
滤镜：色度（颜色）

这个属性的表达式不是很简单，它只有一个参数。只需设置要用颜色参数设置的透明颜色即可。