硬線性漸變（如三角形）看起來鋸齒狀或模糊（Chrome瀏覽器與IE）

我正在用線性構建我的內容三角形。爲什麼？因爲我需要它們的響應寬度（不適用於固定角度旋轉黑客等），但是當涉及到跨瀏覽器測試時，IE和Chrome看起來不同 - 我猜chrome在這裏缺少一些抗鋸齒/插值。硬線性漸變（如三角形）看起來鋸齒狀或模糊（Chrome瀏覽器與IE）

.box { 
 
    width: 100%; 
 
    color: white; 
 
    background: darkgreen; 
 
    padding: 20px; 
 
    position: relative; 
 
    text-align:center; 
 
    margin-bottom: 50px; 
 
} 
 
.box:before, .box:after, .box--darkorange:before, .box--darkorange:after { 
 
     content: ""; 
 
\t \t \t position: absolute; 
 
\t \t \t width: 50%; 
 
\t \t \t left: 0; 
 
\t \t \t bottom: -30px; 
 
\t \t \t height: 30px; 
 
\t \t \t display: block; 
 
\t \t \t background: linear-gradient(to right top, transparent 50%, darkgreen 50%); 
 
} 
 
.box:after { 
 
     left: 50%; 
 
\t \t \t background: linear-gradient(to left top, transparent 50%, darkgreen 50%); 
 
} 
 

 
.box--darkorange { 
 
    background: darkorange; 
 
} 
 
.box--darkorange:before { 
 
\t \t \t background: linear-gradient(to right top, transparent 49%, darkorange 50%); 
 
} 
 
.box--darkorange:after { 
 
     left: 50%; 
 
\t \t \t background: linear-gradient(to left top, transparent 49%, darkorange 50%); 
 
}

<div class="box"> 
 
The triangle looks jagged in Chrome but good in IE 10+ :-(
 
</div> 
 

 
<div class="box box--darkorange"> 
 
The triangle below looks good in Chrome but horrible blurred in IE :-(
 
</div>

這裏是我的意思圖片： Jagged triangle

這裏是我的小提琴手：https://jsfiddle.net/mnnhvgxz/

編輯：哦，相信我可以四處亂與49.5到50左右的值，這兩個世界看起來幾乎是好的，但也許你們不是一個besser解決方案或爲什麼IE瀏覽器在這個模糊的或如何在Chrome中使用AA。謝謝！

來源

2017-10-13 Tyrone

我知道這不是解決您的問題，但您可以簡單地使用modernizr來檢測IE瀏覽器，然後只適用適當的風格。 –

-1

當你使用漸變時，你必須記住這些東西，因爲你的代碼將運行在不同的平臺上。

background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */ 
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */ 
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */ 
background: linear-gradient(red,yellow,blue); /* Standard syntax */

來源

2017-10-13 10:02:13

硬線性漸變（如三角形）看起來鋸齒狀或模糊（Chrome瀏覽器與IE）

回答

相關問題