Сглаживание фигур CSS в Firefox

В Firefox треугольник имеет зубчатые/сглаженные края, независимо от того, вращался он или нет.Сглаживание фигур CSS в Firefox

See fiddle:

CSS (HTML только <div></div>)

div { 
    border-top: 10px solid rgba(255, 255, 255, 0); 
    border-right: 70px solid #777; 
    border-bottom: 10px solid rgba(255, 255, 255, 0); 
    transform: rotate(90deg); 
}

Для фигур, которые заполняют их поле, вы можете применить outline: 1px solid transparent.

Для незакрепленных фигур можно просто применить transform: scale(.999) (найдено on SO).

Но если я изменил последнюю строку CSS на transform: rotate(90deg) scale(.999), наложение все еще происходит.

This bug, поданный назад в12 и по-прежнему обозначенный как «новый», несколько связан, и никакая попытка решения не была выполнена.

Есть ли какие-нибудь другие хакерские обходные пути, чтобы получить гладкие вращающиеся треугольники в Firefox? Избавление от волосяного покрова по середине было бы плюсом.

источник

2014-10-09 willlma

Ничего не добавлять, но благодаря вам и Google, я избавилась от наложения спектров на моей пограничной форме, спасибо! – Codemonkey

Изменение border-style из border-right в outset работал на меня в Firefox 32.0.3, а также добавить height: 0; и width: 0; для удаления волосяного покрова.

div { 
 
    height: 0; 
 
    width: 0;  
 
    border-top: 10px solid rgba(255, 255, 255, 0); 
 
    border-right: 70px outset #777; 
 
    border-bottom: 10px solid rgba(255, 255, 255, 0); 
 
    transform: rotate(90deg); 
 
    margin:40px; 
 
}

<div></div>

Если вы хотите использовать только треугольник в 'фиксированных повернутых' позиции вы можете посмотреть на этом сайте:

http://apps.eky.hk/css-triangle-generator/

div { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: inset; 
 
    border-width: 70px 10px 0 10px; 
 
    border-color: #777777 transparent transparent transparent; 
 
}

<div></div>

источник

2014-10-14 10:11:28

JS Fiddle

если вы используете border:dotted он фиксирует вопрос и добавить width:0 и height:0 удалить 1px пространство от средней

div { 
    width: 0; 
    height: 0; 
    border-style: dotted solid dotted solid; 
    border-color: transparent transparent transparent #777777; 
    border-width: 10px 0 10px 70px; 
    transform: rotate(-90deg); 
    margin:40px; 
}

ссылки: http://blog.dustinboersma.com/post/45768836072/fixing-osx-firefox-border-triangle-pixelation

источник

2014-10-14 10:39:21

Ваша скрипка не создает треугольник, но круг для меня, я работаю с 'border-right: 70px outset # 777;': http://jsfiddle.net/eaz9mo6m/9/ –

Очень странно, ваш код кажется работайте в chrome, но для Firefox 32.0.3 (снимок экрана: http://i.imgur.com/I4nX8Od.png?1), но код из связанного с ним блога работает. –

отредактировал ответ @NickRussler –

Это, кажется, лучше работать в Firefox, но Chrome немного зазубрен. Если ширина и высота равны вы можете контролировать треугольник с преобразованиями довольно легко:

div { 
    width:100px; 
    height:100px; 
    margin:0 auto;  
    background: linear-gradient(-45deg, #777 50%, #fff 50%); 
    transform: translate(0,100px) rotate(-135deg) skew(35deg,35deg); 
}

источник

2014-10-15 13:13:30

Сглаживание фигур CSS в Firefox

ответ

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