¿Cómo funcionan los triángulos CSS?

Hay muchas formas CSS diferentes en Trucos CSS - Formas de CSS y estoy particularmente desconcertado con un triángulo:

Triángulo CSS

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

¿Cómo y por qué funciona?

preguntado el 16 de agosto de 11 a las 00:08

Usted puede: jsfiddle.net/wbZet -

¿Qué tal la plaza que no está? jsfiddle.net/minitech/sZgaa -

@mskfisher El tamaño del borde inferior en su triángulo equilátero no debería ser ceil (sqrt (3) * 60)? ¡Unos pocos píxeles más entonces! -

@Niloct: Lo miré rápidamente en números redondos. Tienes razón, las medidas equiláteras más precisas serían (lado: 58, fondo: 100) o (lado: 60, fondo: 104). -

Aquí hay una gran generador de triángulos CSS para todas las direcciones y tamaños: apps.eky.hk/css-triangle-generator -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.