CSS三角形漸變背景色

我一直在玩三角形「黑客」與CSS，但不能使它與漸變背景顏色工作。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一起使用。有什麼可以解決這個問題的？

來源

2016-12-11 Kiss Koppány

請提供一些信息，爲什麼downvoting，這樣我就可以改善這個問題。否則downvote是沒有價值的。謝謝 –

你有沒有嘗試過用'-moz'等實現線性漸變？ https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient – Jack

也許漸變的背景會更易於管理：

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

來源

2016-12-11 18:42:42

CSS三角形漸變背景色

回答

相關問題