每天一个css动效之渐变色三角形

html代码：

<div class="tri"></div>

css:

.tri{
    position: relative;
    overflow: hidden;
    background: linear-gradient(-40deg, #0b156f, #98214c);
    background: -webkit-linear-gradient(-40deg, #0b156f, #98214c);
    background: -moz-linear-gradient(-40deg, #0b156f, #98214c);
    width: 80px;
    height: 200px;
    margin: 50px auto;
}
.tri:before,
.tri:after {
    position: absolute;
    content: '';
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 200px solid #222;
}
.tri:before {
    margin-left: -40px;
}
.tri:after {
    margin-left: 40px;
}