用CSS制做三角形效果

通常咱们要在页面上实现一个小三角形都是要作一张图片，图片虽然很小，仍是很浪费资源的，实际上用css中的border属性就能实现一个三角形了：

原理为：

1、能够动手先设置一个大小为20px的div，并对这div的四边分别设置不一样颜色的实线（solid）border，就会发现border的像素分布

样式为：div{

               width: 20px;

               height: 20px;

               border-width: 20px;

               border-style：solid；

               border-top-color: blue;

               border-bottom-color: red;

               border-left-color: yellow;

              border-right-color: green; }

如图：

 

2、若是div没有设置大小的话，则浏览器会默认其为2px，全部要先将div尺寸设置为0px；

样式改成：div{

                  width: 0px;

                  height: 0px;

                  border-width: 20px;

                  border-style：solid；

                  border-top-color: blue;

                  border-bottom-color: red;

                  border-left-color: yellow;

                  border-right-color: green; }

如今把div宽高都设为0后，就出现了4个三角形，这是border像素的分布

如图：

 

3、此时如想保留top方向的三角形，就把其他三边（left、right、bottom）的颜色设置为透明（transparent）便可：

如：div{

            width: 0px;

            height: 0px;

            border-width: 20px;

            border-style：solid；

            border-top-color: blue;

            border-bottom-color: transparent;

            border-left-color: transparent;

            border-right-color: transparent; }

可将border-color缩写为：border-color: blue transparent transparent ;

如图：

其余四个方向的同一原理。