グラデーションの背景色を持つ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>