CSS Треугольник с градиентом цвета фона

Question

Я играл с треугольником «взломал» с помощью css, но не смог заставить его работать с цветом фона градиента.

.m--label { 
    position: relative; 
    font-size: .9em; 
    height: 40px; 
    margin: 0; 
    padding: 0 10px; 
    color: #fff; 
    background-color: #E00000; 
    line-height: 38px; 
} 

.m--label:after { 
    margin: 0; 
    padding: 0; 
    right: 0; 
    float: right; 
    position: absolute; 
    content: ""; 
    border-top: 40px solid #E00000; 
    border-right: 40px solid #2b2b2b; 
    border-bottom: 0px solid #E00000; 
} 

Если я изменяю border-top или bordem-bottom цвета градиента, как это:

border-top: 40px solid -webkit-linear-gradient(top, rgba(224,0,0,1) 0%,rgba(255,59,0,1) 100%); 

она полностью исчезает треугольник, поэтому он выглядит как простая коробка. Кроме того, с этим решением он будет работать только с Chrome. Что может быть решением для этого?

Answer 1

может быть градиент фон будет более легко управлять:

.m--label { 
 
    position: relative; 
 
    font-size: .9em; 
 
    height: 40px; 
 
    margin: 0; 
 
    padding: 0 10px; 
 
    color: #fff; 
 
    background-color: #E00000; 
 
    line-height: 38px; 
 
    background-image:linear-gradient(-225deg, transparent calc(100% - 40px), rgba(224,0,0,1) calc(100% - 40px),rgba(255,59,0,1) calc(100% - 20px)); 
 
}

<div class="m--label"></div>