css動畫的內(nèi)容，可以去看看 傾斜部分

簡單一點的做法，前后各一個偽類，白色底蓋掉多余的紅色部分，其它就是個正常的div;

內(nèi)容遮蓋，就去改邊框線的大小?；究梢詫崿F(xiàn)。。
示例：

        <div class="red">
            <p>初始文章數(shù)</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;
            }