CSS的border属性绘制简单三角形、边框三角形

1、简单三角形的实现

使用CSS中的border（边框）即可实现如下所示的三角形：

 实现原理如下：

首先为元素添加border：

.big{
       width: 100px;
       height: 100px;
       border: 3px solid plum;
 }

效果图如下： 

这是我们平常使用border时看见的普遍的情况，大家理所当然认为border是由矩形边框组成，实际上，元素的border是由三角形组合而成，为了验证这个结论，可以增大border的宽度，并为各border边设置不同的颜色：

  .big{
            width: 100px;
            height: 100px;
            border: 50px solid;
            border-color: plum pink paleturquoise peachpuff;
      }

效果图如下：

 将div宽高置为0会发生怎样神奇的事情呢？？？

    .big{
            width: 0px;
            height: 0px;
            border: 50px solid;
            border-color: plum pink paleturquoise peachpuff;
     }

效果图！！！ 

 我们惊奇的发现，此时的元素由四个三角形拼接而成，为实现最终效果，可以保留一边，将剩余的边框设置成白色或者透明色，为了节省空间，可以将上下左右任意一边的border边框置为0。

       .big{
            width: 0px;
            height: 0px;
            border-width: 82px 82px 0 82px;
            border-style: solid;
            border-color: plum transparent transparent transparent;
            position: relative;
        }

 效果图如下：

 2、边框三角形的实现

带边框的三角形是指为三角形添加其它颜色的边框，由于不能继续通过为已有三角形设置border的方法来为其设置边框，所以这里采用绝对定位和相对定位来实现如下效果。

大三角形采用绝对定位，小三角形需要参照大三角形的位置，所以采用相对定位，之后利用相对定位的四个属性top、bottom、left、right来调整小三角形的位置。