下面图的样式图表谁做过吗

Question

Answer 1

css动画的内容，可以去看看 倾斜部分

Answer 2

简单一点的做法，前后各一个伪类，白色底盖掉多余的红色部分，其它就是个正常的div;

内容遮盖，就去改边框线的大小。基本可以实现。。
示例：

        <div class="red">
            <p>初始文章数</p>
        </div>
        .red {
                position: relative;
                width:200px;
                height: 100px;
                background: red;
                text-align: center;
            }
            .red p {
                line-height: 100px;
            }
            .red:after{
                display: block;
                content:'';
                position: absolute;
                top: 0px;
                right: 0px;
                border-style: solid;
                border-width: 50px 20px 50px 20px;
                border-color: transparent #FFFFFF #FFFFFF transparent;
            }
            .red:before{
                display: block;
                content:'';
                position: absolute;
                top: 0px;
                left: 0px;
                border-style: solid;
                border-width: 50px 20px 50px 20px;
                border-color: transparent transparent #FFFFFF #FFFFFF;
            }