No image!使用bordercolor属性来制作小三角形

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

border简写属性是按照如下属性设置的:

border:border-width/border-style/border-color.

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

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8"/>
    <title></title>
    <style type="text/css">
        ul {
            list-style:none;
        }
        li {
            border:1px solid #cccccc;
            60px;
            height:40px;
            float:left;
        }

    </style>
</head>
<body>
   <ul>
       <li>
           tab1
       </li>
   </ul>
</body>
</html>

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

li {
            border-1px;
            border-style:solid;
            border-color:#cccccc;
            60px;
            height:40px;
            float:left;
}

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

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

 a {    
            display:block;
            50px;
            height:50px;      
            border-style:solid;
            border-color:#999999 #ff0000 #000000 #4cff00;
            border-20px;
 }

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

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

a {    
            display:block;
            2px;
            height:2px;      
            border-style:solid;
            border-color:#999999 #ff0000 #000000 #4cff00;
            border-20px;
}

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

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

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

a {    
            display:block;
            0px;
            height:0px;      
            border-style:solid;
            border-color:#999999 transparent transparent;
            border-30px;
}