在当前流行的网站，我们经常会看到一些小三角下拉提示（微博在菜单顶部），一个简单的方法可以用来代替一个图片，但随着前端技术的发展，对鲤鱼的前端性能开发，前端开发人员越来越多地开始使用图片恢复原来的简单性，减少不使用图片、相关图片和图标的CSS的好处是，我们可以轻松地自定义图标的大小和颜色。

CSS不是实现三角形图标的新技术。以前有很多相关的技术文章。本文主要分析了实际场景中遇到的问题以及如何避免这些问题。

基本原理基本相同。这里我们主要介绍CSS边框的使用（当然，我们也可以使用CSS3的旋转技术来实现，由于相容性不参与在这里）。

CSS边框实现

在我们意义上，div或元素的边界不是一条高度直观的线，而是一个相等的高度梯形或三角形（宽度和高度是0）。我们可以看到效果。

div定义：





Css：


arrow1 {。
宽度：0px；
身高：0px；
边框宽度：30px；
边框样式：实心；
边框颜色：# 007998 # 47a447 # 3c6ab9 # d2322d；
}


最终效果：



可以看出，每个方向的边界是一个三角形。然后我们只需要在其他方向的边界设置为透明或隐藏，我们可以在任何方向上得到一个三角形：


arrow1 {。
宽度：0px；
身高：0px；
边框宽度：30px；
边框样式：实心；
边框颜色：# 007998透明透明；
}


再看一遍效果。



注意：透明属性用于设置背景色中的背景色选项以在背景中透明。

箱子!这就是我们想要的，但在与鸟IE6杯！



长长的黑盒子不能直接看到，因为IE6不支持透明属性。在这个时候，我们可以设置相应区域的边框样式来冲，冲则躲在边框的宽度是large.css修改如下：


arrow1 {。
宽度：0px；
身高：0px；
边框宽度：30px；
边框样式：实心；
边框颜色：# 007998透明透明；
}


效果如下（在IE6）：



然而，这还没有结束，我们设置了一个阴影来观察最终生成的结果。



即使我们看到一个三角形，我们需要生成，三角形的高度仍然是原来的高度，这将导致向上位移时，与其他元素使用。在这一点上，我们需要设置的高度较低的边界为0：


arrow1 {。
宽度：0px；
身高：0px；
边框宽度：0 30px 30px；
边框样式：实心；
边框颜色：# 007998透明透明；
}


再看一遍效果。



看来还不是很友好。使用时我们仍然需要修改相应的颜色。我们能根据父元素设置的颜色显示颜色吗我们需要修改边框颜色：


arrow1 {。
宽度：0px；
身高：0px；
行高：0px；
边框宽度：0 30px 30px；
边框样式：实心虚线虚线；
边框左彩色：透明；
边框右侧颜色：透明；
}


效果（使用当前字体颜色）：



当然，除了CSS边界生成的使用，我们也可以用它来产生特殊的角色定位，也可以使用CSS3产生旋转（hack处理IE6）。使用边界是一种常见的和容易的-到-可兼容的方式