Как сделать треугольник CSS с гладкими краями?

Даже в чистом CSS мы можем получить ровные диагонали.

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid rgba(255, 255, 255, 0); 
    border-right: 20px solid rgba(255, 255, 255, 0);
}

Вместо прозрачности вы можете использовать rgba (255, 255, 255, 0). Это снова дает прозрачность. Но альфа=0 делает диагонали гладкими.

Проверьте поддержку браузером rgba css-tricks.com/rgba-browser-support.

Спасибо

Для Firefox вы можете добавить -moz-transform: scale(.9999); сделать ровные края. В твоем случае:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    -moz-transform: scale(.9999);
}

Будет делать свое дело.

Я только что наткнулся на ту же проблему и понял этот трюк (по крайней мере, он работает на Mac):

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);

Использование стиля границы inset для прозрачных границ дает гораздо лучшие результаты в Firefox:

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;

Что действительно помогло мне, когда я впервые наткнулся на это, так это масштабирование однородного треугольника на определенную величину. Firefox кажется особенно «резким» с разносторонними треугольниками. Интересно, что идеальные треугольники визуализируются без зазубренных краев. Если в вашем проекте возможны преобразования CSS, просто попробуйте:

.triangle {
  width: 0;
  height: 0;
  border-top: 0;
  border-bottom: 20px solid #666699;
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent;
  -moz-transform: scaleY(1.5); // optional: replace with Sass/SCSS/LESS mixin
  -moz-transform-origin: top; // optional: replace with mixin, too
}

Это исправило алиасинг по краю для меня. JSFiddle здесь (сейчас только Mozilla). Надеюсь это поможет!

Очень хакерский способ - использовать повернутый div

Здесь я использовал два элемента div, чтобы показать треугольник:

<div class="triangle">
    <div class="rot"></div>
</div>

и повернул внутренний div для двух неправильных сторон треугольника:

.triangle{
    position:relative;
    width:100px;
    height:60px;
    border-bottom:1px solid black;
    border-radius:12px;
}
.rot{
    border-radius:10px;
    border-left: 1px solid black;
border-top: 1px solid black;
width:70px; height:70px;
    -webkit-transform:rotate(45deg);
    position:absolute;
    left:15px;
    top:23px;
}

Я не пытался найти связь между числами.

Вот скрипка кода:

http://jsfiddle.net/mohsen/HTMcF/

НО я настоятельно рекомендую вам использовать элемент canvas по этой причине.

Для меня использование dashed для прозрачных границ работало для большинства браузеров, которые не сглаживали их автоматически, а поворот на 360 градусов работал для старого Webkit:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px dashed transparent; 
    border-right: 20px dashed transparent;
    -webkit-transform: rotate(360deg);
}

Ни один из других не работал у меня, но я обнаружил следующее (случайно):

.triangle {
  border: 1.3rem dashed #666699;
  border-right: .5rem solid rgba(255, 255, 255, 0);
}

Сочетание пунктирного/сплошного и исправления rgba работало в FF31, IE11 и Chrome36.