Crispin's Blog

No image! 使用border-color属性来制作小三角形

前端
About 5 min read ( 6 Words , 3 Photos )
Reads

border属性在项目中使用的还是蛮频繁的。例如页签、按钮这样的。

border简写属性是按照如下属性设置的：border: border-width / border-style / border-color

如果说我需要一个灰色的1像素的实线边框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      ul {
        list-style: none;
      }
      li {
        border: 1px solid #cccccc;
        width: 60px;
        height: 40px;
        float: left;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>tab1</li>
    </ul>
  </body>
</html>

当然，我们也可以分开来写：

1
2
3
4
5
6
7
8
li {
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
  width: 60px;
  height: 40px;
  float: left;
}

了解了border的基本属性，我们就来看看如何用border-color这个属性来制作小三角形。有时候，我们在项目中可能需要这样的效果：一个tab页签的当前页中需要一个倒三角形的小下标来指示。

一般来说我们可能想到的是使用切好的小三角形图片使用定位来做。其实，我们完全可以使用border-color这个属性来替换掉图片。

1
2
3
4
5
6
7
8
a {
  display: block;
  width: 50px;
  height: 50px;
  border-style: solid;
  border-color: #999999 #ff0000 #000000 #4cff00;
  border-width: 20px;
}

我们给一个a元素设置了边框的值，显示如下：

四色边框梯形效果截图

在我们的浏览器中，每个边框是以等腰梯形的形式闭合在一起的。如果我们要让等腰梯形变成一个三角形，那么a元素中间的content内容就要把width和height全部设置为0px，这样中间的白色content部分就会消失不见了，只剩下边框了。

1
2
3
4
5
6
7
8
a {
  display: block;
  width: 2px;
  height: 2px;
  border-style: solid;
  border-color: #999999 #ff0000 #000000 #4cff00;
  border-width: 20px;
}

width/height为2px时的效果截图

当width和height为2px时，中间还有一个长宽为2px的正方形。当完全为零时，就变成了四个闭合在一起的等边三角形。

而这个三角形的大小就可以通过border-width这个属性来改变等边三角形的高来进行控制。

在border-color中还有一个transparent这个值，它可以让对应方向的边框设置为透明色（按照上-右-下-左排序）。所以我们可以让下-右-左全部为透明色，只留下上面的灰色三角形，这样我们就通过css完成了一个小三角形的制作。

1
2
3
4
5
6
7
8
a {
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: #999999 transparent transparent;
  border-width: 30px;
}

纯CSS三角形效果截图

CSS