CSS3 linear-gradient实现三角形

html代码：

<div class="box"></div>

css代码：

.box {
    position: relative;
    background: red;
    height: 200px;
}
.box:before,
.box:after {
    content: "";
    position: absolute;
    height: 200px;
    width: 50%;
    bottom: -200px;
}
.box:before {
    left: 0;
    background: linear-gradient(to right top,transparent 50%,red 50%,50%);
}
.box:after {
    right: 0;
    background: linear-gradient(to left top,transparent 50%,red 50%,50%);
}

效果图如下：
上面为.box本身，下面分为两个三角形是用伪类，具体情况看个人需求。