css3 写带边线的倒三角形和组合的三角形分割原理

如上的一张图，如果你用样式来写，你打算怎么写呢？
~~~~~~~~~~~~~~~~~~~~~ 旋转 定位 ？~~~~~~~~~~~~
我想了想，这个不就是写倒三角形原理的写法嘛~。那先来了解一下倒三角原理是啥？
先看如下代码：

html:

 <p class="san-p"></p>

css:

.san-p{
          width: 100px;
          height: 100px;
          border-width: 30px ;
          border-style: solid;
          border-color: #00bad2 yellow pink orange;
        }

运行结果如下图：
可以看出，要是我们把height和width设置成0px，那么border就会占据整个空间。又因为css的每条边相交的地方，都是三角，也就是border是由四个三角形组成的。所以说，只要我们把宽度和告诉设置的很小，border的宽度设置很大，那么就可以得到如下效果：
修改一下css代码：

.san-p{