CSS--画三角形

1、使用border

原理如下图的盒子模型，各个部分的位置分配。有理由相信，padding，border,margin都由四部分组成，也都可以用来画三角。但是为什么这里使用border呢？因为border可以可以单独设置很多样式，颜色呀，大小啊。

需要注意的是三角形箭头的方向与boder位置相反。
如画一个向上的箭头

width: 0;height: 0;border-left: 240px solid transparent;border-left: 240px solid transparent;boder-bottom: 120px solid yellow;

这里三角形的宽度是由两部分组成，一部分由border-left的宽度给撑开，一部分由border-right的宽度给撑开也就是这里的border-left: 240px solid transparent;,border-left: 240px solid transparent;.而三角形本身的高度由border-bottom的本身来决定，也就是boder-bottom: 120px solid yellow;。

需要说的是，transparent表示颜色rgba(0,0,0,0),也就是透明的黑色。

其他形状举一反三。