CSS3角箭头运用实践活动

用CSS来制做无照片带箭头的DIV方框（此编码较为合适追求完美纯编码者）
这类实际效果还可以用照片情况来完成，编码会更简约
CSS编码：

HTML编码：

实际效果图：

这次详细介绍下CSS制做3角箭头

一般，大家做上图那个3角形，1般全是做张图，并且必须两张，由于1般全是往下拉菜单的实际效果，必须有个hover的款式，箭头是反的。那是否有更好的方法呢，终究要用两张照片来处理这么1个小难题太消耗資源了，因而，下面我要用纯CSS的方式来处理这1难题，用到的只需css的1个特性，便是border-width

大家先看来个款式，假如设定元素边框，会如何：

好像看不出甚么，让我给4个边框再加不一样的色调吧再看看吧：

是否发现了些甚么？对，让大家把正中间的文本去掉吧：

这样，就出現4个3角形了，随后大家假如必须顶部那个3角形，只必须将border的left、right、bottom设定成情况色就可以了：

这样，大家必须的3角形就出現了，而且能够设定4个不一样方位的了：

款式编码很简易，就几句话：

具体运用

例如大家要应用向下的箭头(适配IE6写法)

HTML编码：

CSS编码：

表明：
这里的演试是用了边框全透明色，假如你用不到全透明的话，立即设定border-color为你必须的色调便可以了，免除以便适配IE6的全透明边框滤镜写法
Chroma特性能够设定1个目标中特定的色调为全透明色，它的表述式以下：

这个特性的表述式是否很简易，它仅有1个主要参数。只需把您要想特定全透明的色调用Color主要参数设定出来便可以了。