Поворот на основе треугольника рендеринга в firefox

Когда я делаю треугольник css, все хорошо, но когда я поворачиваю его, в середине появляется странная строка. Почему это?Поворот на основе треугольника рендеринга в firefox

enter image description here

Вот fiddle.

div { 
    position:absolute; 
    top:100px; 
    width:0; 
    height:0; 
    border:100px solid rgba(0,0,0,0); 
    border-top-color:#333; 
    -webkit-transform:rotate(45deg); 
    -moz-transform:rotate(45deg); 
    transform:rotate(45deg); 
}

источник

2015-07-04 Skatch

Почему вращать треугольник, почему бы просто не использовать другую границу? –

add translate3d (0, 0, 1px) - https://jsfiddle.net/g3ahcryn/ – Dmitriy

@Paulie, я использую это как часть гораздо большей анимации, и у меня есть четыре треугольника, которые встречаются четырьмя различными способами. Во всяком случае, мне любопытно, как именно я могу достичь этой формы без вращения? – Skatch

его ошибка - https://bugzilla.mozilla.org/show_bug.cgi?id=818109

добавить translate3d(0, 0, 1px)

div { 
 
    position:absolute; 
 
    top: 100px; 
 
    width: 0; 
 
    height: 0; 
 
    border: 100px solid rgba(0,0,0,0); 
 
    border-top-color: #333; 
 
    -webkit-transform: rotate(45deg) translate3d(0, 0, 1px); 
 
    -moz-transform: rotate(45deg) translate3d(0, 0, 1px); 
 
    transform: rotate(45deg) translate3d(0, 0, 1px);   
 
}

<div></div>

источник

2015-07-04 16:08:50 Dmitriy

Я заметил, что использование этого взлома слегка меняет элемент ... – Skatch

Поворот на основе треугольника рендеринга в firefox

ответ

Смежные вопросы