具有渐变背景颜色的 CSS 三 Angular 形

Question

我一直在尝试使用 css 来“破解”三 Angular 形，但无法使其与渐变背景颜色一起使用。

.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%);

它完全淡化了三 Angular 形，所以它看起来像一个简单的盒子。此外，使用此解决方案，它只能与 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>