css画下图

通常我看到这种效果，都是直接ps解决，但是不断重申性能的今天，显然不适应时代的需求啊！

今天看到群里有人问这种效果怎么做了，我在思考的时候，有人已经给出答案了；

我就测试了一下，发现确实可以实现，总结了下，就记一下吧

    width: 104px;
    height: 26px;
    border-width: 11px;
    border-style: solid;
    border-color: yellow red;
    background-color: red;

上面的css直接放在一个div上就可以实现了，另外这个border-color的写法，按照老规矩是声明上右下左的做法，是上下为黄色，左右为红色。在border的宽度扩张的到一定程度就会呈现图片效果。

另外border的声明顺序有规则的，最好是像上述css分开来写，因为border连写的顺序会影响效果