CSS Dreieck mit Farbverlauf Hintergrundfarbe

Question

Ich habe herum mit Dreieck "hack" mit CSS gespielt, kann aber nicht mit Farbverlauf Hintergrundfarbe arbeiten.

.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; 
} 

Wenn ich ändern, um die border-top oder bordem-bottom Farben wie diese Steigung:

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

es verblasst völlig auf das Dreieck, so dass es wie eine einfache Box erscheint. Auch mit dieser Lösung würde es nur mit Chrome funktionieren. Was könnte die Lösung dafür sein?

Answer 1

vielleicht ein Gradient Hintergrund wäre einfach zu handhaben:

.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>