CSS-диагональное наложение границ в Firefox

Question

Я нарисовал форму, используя свойства границы в CSS. Он прекрасно смотрится в Chrome, но в Firefox границы действительно некрасиво:

.shape 
 
{ 
 
\t width: 100px; 
 
\t height: 50px; 
 
\t margin: 0 auto; 
 
\t background-color: #3F7296; 
 
\t position: relative; 
 
\t color: #FFF; 
 
\t line-height: 50px; 
 
\t font-size: 40px; 
 
} 
 
.b1, .b2 
 
{ 
 
\t position: absolute; 
 
\t left: 100px; 
 
\t bottom: 0px; 
 
\t width: 0px; 
 
\t height: 0px; 
 
\t border-style: solid; 
 
\t border-width: 0px 0px 50px 16px; 
 
\t border-color: transparent transparent transparent #3F7296; 
 
} 
 

 
.b2 
 
{ 
 
\t left: -16px; 
 
\t border-width: 50px 16px 0px 0px; 
 
\t border-color: transparent #3F7296 transparent transparent; 
 
}

<div class="shape"> 
 
\t <i class="b1"></i> 
 
\t <i class="b2"></i> 
 
</div>

Fiddle: http://jsfiddle.net/Ly1dz111/

Скриншот из Chrome:

Скриншот из Firefox (Mac OS X)

Как я могу это исправить в Firefox?

Answer 1

Это known bug in Firefox's handling of diagonal borders, и обходным путем является установка масштабного преобразования элемента, чтобы Firefox был вынужден запустить его с помощью дополнительного графического шага.

В вашем примере необходимо установить -moz-transform: scale(.9999) на .b1 и .b2 элементов. Это заставляет сглаживание в Firefox.

.shape 
 
{ 
 
\t width: 100px; 
 
\t height: 50px; 
 
\t margin: 0 auto; 
 
\t background-color: #3F7296; 
 
\t position: relative; 
 
\t color: #FFF; 
 
\t line-height: 50px; 
 
\t font-size: 40px; 
 
} 
 
.b1, .b2 
 
{ 
 
\t position: absolute; 
 
\t left: 100px; 
 
\t bottom: 0px; 
 
\t width: 0px; 
 
\t height: 0px; 
 
\t border-style: solid; 
 
\t border-width: 0px 0px 50px 16px; 
 
\t border-color: transparent transparent transparent #3F7296; 
 
\t -moz-transform: scale(.9999) 
 
} 
 

 
.b2 
 
{ 
 
\t left: -16px; 
 
\t border-width: 50px 16px 0px 0px; 
 
\t border-color: transparent #3F7296 transparent transparent; 
 
}

<div class="shape"> 
 
\t <i class="b1"></i> 
 
\t <i class="b2"></i> 
 
</div>