通过CSS的border绘制三角形

通过css的border 可以绘制出三角形, 不同的样式组合，有着不同的效果，可以控制它的大小，颜色，方向。看下面各种图形，相信可能还有很多图形，大家都没见过。

先写出公共的样式：

 .border {

     width:;

     height:;

     border-color: transparent;

     border-width: 1rem;

     border-style: solid;

 }

在上面的css基础上，添加下面的组合代码，将可以控制三角形的方向：

 border-left-color: #000;

 border-right-color: #000;

 border-top-color: #000;

 border-bottom-color: #000;

 border-left-color: #000;

 border-bottom-color: #000;

 border-right-color: #000;

 border-bottom-color: #000;

 border-right-color: #000;

 border-top-color: #000;

 border-left-color: #000;

 border-top-color: #000;

 border-top-color: #000;

 border-bottom-color: #000;

 border-left-color: #000;

 border-right-color: #000;

 border-top-color: #000;

 border-left-color: #000;

 border-bottom-color: #000;

 border-top-color: #000;

 border-left-color: #000;

 border-right-color: #000;

 border-bottom-color: #000;

 border-left-color: #000;

 border-right-color: #000;

 border-top-color: #000;

 border-right-color: #000;

 border-bottom-color: #000;

还有下面的这个效果，

 border-left-color: #000;

 border-right-color: #000;

 border-left-width: 3rem;

不同的组合产生不同的效果，大家可以尝试各种组合带来的效果。

巴特西