用纯CSS实现三角图标
在前端开发中,经常遇到这样的三角图标。
虽然美术设计人员可能已经帮你切好了图片,用CSS的绝对定位往上一摆即可。但这是最原始的方法,主框一旦改动,三角图标也得跟着改动。
现在来看如何用纯CSS实现三角图标,它的优点非常明显,不用修改图片,而且减少了网络请求。我找到 2 种方法来制作这样的三角图标。
1.边框法
对一个宽高均为 0 的容器,设置一定宽度的边框。其中一条边的颜色为三角图标所需的颜色,其余边框颜色设为透明。这个容器看起来就分成了 4 份,每一份成为一个三角形,这就是它的四条边。为了减少容器的大小,所需三角形的对边可设置为 0。代码如下:
.triangle {
display: block;
width: 0;
height: 0;
border-width: 0 10px 10px; /* 设定横向边框的宽度小于竖向边框,可以形成长三角形 */
border-style: solid;
border-color: transparent transparent red;
}
发挥你的想象,还可以组合成其它效果的箭头。例如气泡效果的长斜箭头,可以使用容器的上右部分2个三角来组合,并且将容器设置成竖向的长方形。
2.旋转法
这种方法需要两个容器,外层容器限定范围,内层容器用于制作三角图形。将内层容器的背景色设置为所需三角形的颜色,再将其旋转45度,然后将其偏移(如向下偏移则形成上三角),并且设置外层容器溢出的截断。
<span class="arrow"><span></span></span>
span.arrow {
display: block;
width: 15px; /* 宽高设置为内层容器对角线的长度,或者略大一点 */
height: 15px;
overflow: hidden;
}
span.arrow span {
position: relative;
top: 10px;
display: block;
width: 8px;
height: 8px;
margin: 0 auto;
border: 1px solid #cdd2d9;
background-color: #f7f7f7;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-o-transform: rotate(45deg); /* Opera */
}
旋转法的优点是,可以制作带连线的三角,并且可以增加阴影、渐变等效果。但这是 CSS3 的特性,必须使用支持 CSS3 的浏览器。