Как правильно оформить кросс-браузерный треугольник в CSS3?

Question

[enurich]

Интересует правильность оформления кросс-браузерного треугольника в CSS3. Конкретно проблема возникает с угловой границей (сглаживание и выпирающие пиксели). В Yandex-браузере и Chrome все, конечно, работает хорошо, как и в последних версиях IE. Для наглядности прикрепляю картинку:


Поиск не помогает, но где-то нашел вот такой хак, и он помог только Firefox:

-webkit-transform: rotate(.9999);
-moz-transform: scale(.9999);
-o-transform: rotate(.9999);
transform: rotate(.9999);

Также, известно о проблемах Firefox с transparent, поэтому по умолчанию сам треугольник оформлен так:

.cont {
	position: absolute;
	content: "";
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 640px 192px 0 0;
	border-color: rgb(255,255,255) rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
	
	-webkit-transform: rotate(.9999);
	-moz-transform: scale(.9999);
	-o-transform: rotate(.9999);
	transform: rotate(.9999);
}

Дайте, пожалуйста, совет. Есть ли кросс-браузерное решение этой проблемы или же проще воспользоваться png-картинками на замену этим элементам?

Answer 1

[Юрий Лобанов]

делайте png, цените свое время.

Answer 2

[Руслан]

Было уже на тостере, box-shadow попробуйте, а для хрома -webkit-blur