Как сделать CSS-треугольник с гладкими краями? - PullRequest
Новая
       37

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

31 голосов
/ 13 сентября 2011

У меня есть треугольник ( 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.)

Ответы [ 8 ]

54 голосов
/ 10 января 2014

Для 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);
}

сделает свое дело.

29 голосов
/ 30 марта 2012

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

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

Спасибо

13 голосов
/ 29 мая 2014

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

border-top: 22px solid $pink;
border-right: 84px inset transparent;
border-left: 84px inset transparent;
3 голосов
/ 29 июля 2013

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

1 голос
/ 24 июня 2015

Для меня использование 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);
}
1 голос
/ 13 сентября 2011

Очень хакерским способом было бы использовать повернутый 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 по этой причине.

0 голосов
/ 20 августа 2014

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

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

Смесь dashed / solid и исправления rgba работала в FF31, IE11 и Chrome36.

...