flecha - generador de figuras geometricas css

¿Cómo hago un triángulo CSS con bordes suaves?

Question

Tengo un triángulo ( JSFiddle ) usando este CSS:

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

Y este HTML:

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

Esto forma un triángulo, pero las líneas diagonales son dentadas y pixeladas. ¿Cómo puedo hacer que sean suaves? (Pude alisarlos en Safari y Chrome al puntearlos, pero eso rompió los triángulos en Firefox e IE).

Answer 1

Acabo de tropezar con el mismo problema, y ​​descubrí este truco (al menos, funciona en una 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);

Answer 2

Incluso en CSS puro podemos obtener las diagonales suaves.

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

En lugar de dar transparente puede hacer uso de rgba (255, 255, 255, 0). Esto nuevamente da transparencia. Pero el alfa = 0 hace diagonales suaves.

Compruebe el soporte del navegador para rgba css-tricks.com/rgba-browser-support

Gracias

Answer 3

Lo que realmente me ayudó cuando tropecé por primera vez con esto fue escalar un triángulo uniforme en cierta cantidad. Firefox parece particularmente "nervioso" con triángulos escalenos. Aunque es interesante, los triángulos perfectos se renderizan sin bordes irregulares. Si las transformaciones CSS son posibles en su proyecto, simplemente intente:

.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
}

Esto solucionó el aliasing en el borde para mí. JSFiddle here (Mozilla solo ahora). ¡Espero que esto ayude!

Answer 4

Ninguno de los otros funcionó para mí, pero me pareció que lo siguiente hizo (por accidente):

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

La mezcla de discontinuo / sólido y la corrección rgba funcionó en FF31, IE11 y Chrome36.

Answer 5

Para Firefox puede agregar -moz-transform: scale (.9999); para hacer bordes suaves En tu caso:

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

Hará el truco.

Answer 6

Para mí, el uso de dashed para los bordes transparentes funcionó para la mayoría de los navegadores que no los suavizan automáticamente y rotando 360 grados para el viejo 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);
}

Answer 7

Una forma muy hacky sería usar un div rotado

Aquí usé dos divs para mostrar un triángulo:

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

y rotó el div interno para dos lados no rectos del triángulo:

.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;
}

No intenté encontrar la relación entre los números.

Aquí está el violín del código:

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

PERO, le sugiero encarecidamente que use el elemento canvas por este motivo.

Answer 8

Usar el inset estilo de borde para bordes transparentes da mejores resultados en Firefox:

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