硬い線形勾配（三角形など）がぎざぎざまたはぼやけて見える（Chrome対IE）

Question

私はコンテンツの三角形を線形の勾配で構築しています。どうして？私は応答の幅（固定されたdeg-rotationハッキングなどでは不可能です）が必要ですが、IEとChromeの見た目が違うブラウザをテストする場合、クロムにはいくつかのアンチエイリアス/補間がありません。

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

EDIT：ああ、と私は周りの混乱可能性を確認してください両方の世界でほぼよく見える49.5〜50程度の値がありますが、おそらくあなたはベッサーの解決策がないのですか、IEがこのようにぼんやりしているのですまたはChromeでAAにする方法ありがとう！

Answer 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 */