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

У меня есть треугольник (JSFiddle) с помощью этого CSS:

.triangle {
    width: 0;
    height: 0;
    border-top: 0;
    border-bottom: 30px solid #666699;
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent;
    }

И этот HTML:

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

Это делает треугольник, но диагональные линии неровны и неровны. Как я могу сделать их гладкими? (Я смог сгладить их в Safari и Chrome, сделав их пунктирными, но это сломало треугольники в Firefox и IE.)

Ответ 1

Даже в чистом 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

Спасибо

Ответ 2

В 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);
}

Сделает трюк.

Ответ 3

Я только что наткнулся на ту же проблему и понял этот трюк (по крайней мере, он работает на 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);

Ответ 4

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

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

Ответ 5

То, что действительно помогло мне, когда впервые обрушилось на это, было наложение равномерного треугольника на определенную сумму. Кажется, что 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 только прямо сейчас). Надеюсь, это поможет!

Ответ 6

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

Здесь я использовал два divs для отображения треугольника:

<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 по этой причине.

Ответ 7

Для меня использование 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);
}

Ответ 8

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

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

Смесь штрихового/твердого тела и исправление rgba работали в FF31, IE11 и Chrome36.