¿Cómo funcionan los triangularjs CSS?

Hay muchas formas de CSS diferentes en CSS Tricks – 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; } 
 

¿Cómo y por qué funciona?

Triangularjs CSS: una tragedia en cinco actos

Como dijo Alex , los bordes del mismo ancho se juntan entre sí en angularjs de 45 grados:

las fronteras se encuentran en ángulos de 45 grados, el contenido en el medio

Cuando no tiene borde superior, se ve así:

sin borde superior

Entonces le das un ancho de 0 …

sin ancho

… y una altura de 0 …

sin altura tampoco

… y finalmente, haces que los dos bordes laterales sean transparentes:

bordes laterales transparentes

Eso resulta en un triángulo.

Los bordes usan un borde en ángulo donde se cruzan (ángulo de 45 ° con bordes de ancho igual, pero cambiar el ancho de los bordes puede sesgar el ángulo).

Ejemplo de borde

jsFiddle .

Al ocultar ciertos bordes, puede obtener el efecto de triángulo (como puede ver arriba haciendo diferentes porciones de diferentes colores). transparent se utiliza a menudo como un color de borde para lograr la forma de triángulo.

Comience con un cuadrado básico y bordes. A cada borde se le dará un color diferente para que podamos distinguirlos:

 .triangle { border-color: yellow blue red green; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; } 

que te da esto :

cuadrado con cuatro bordes

Pero no es necesario el borde superior, por lo que establece su ancho en 0px . Ahora nuestro borde inferior de 200px hará que nuestro triángulo sea 200px alto.

 .triangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } 

y obtendremos esto :

mitad inferior del cuadrado con cuatro bordes

Luego, para ocultar los dos triangularjs laterales, establezca el color del borde en transparente. Como el borde superior se eliminó de manera efectiva, también podemos establecer el borde superior del color en transparente.

 .triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; } 

finalmente obtenemos esto :

borde inferior triangular

Enfoque diferente:

Triangularjs CSS3 con transformación rotar

La forma triangular es bastante fácil de hacer usando esta técnica. Para las personas que prefieren ver una animación que explique cómo funciona esta técnica, aquí está:

animación gif: cómo hacer un triángulo con transformación rotar

  • Enlace a la ANIMACIÓN: Cómo hacer un triángulo CSS3 .
  • Y DEMO: triangularjs CSS3 hechos con transformación rotar.

De lo contrario, aquí hay una explicación detallada en 4 actos (esto no es una tragedia) de cómo hacer un triángulo isósceles en ángulo recto con un elemento.

  • Nota 1: para triangularjs no isósceles y cosas elegantes, puedes ver el paso 4 .
  • Nota 2: en los siguientes fragmentos, los prefijos del vendedor no están incluidos. están incluidos en las demos de codepen .
  • Nota 3: el HTML para la siguiente explicación es siempre:


PASO 1: Haz un div

Fácil, solo asegúrate de que el width = 1.41 x height . Puede usar cualquier techinque ( consulte aquí ), incluido el uso de porcentajes y relleno de fondo para mantener la relación de aspecto y hacer un triángulo sensible . En la siguiente imagen, el div tiene un borde amarillo dorado.

En ese div, inserta un pseudo elemento y dale el 100% de ancho y alto de padre. El pseudo elemento tiene un fondo azul en la siguiente imagen.

Hacer un triángulo CSS con transformar roate paso 1

En este punto, tenemos este CSS :

 .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr: before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; } 

PASO 2: vamos a rotar

Primero, lo más importante: defina un origen de transformación . El origen predeterminado está en el centro del pseudo elemento y lo necesitamos en la parte inferior izquierda. Al agregar este CSS al pseudo elemento:

transform-origin:0 100%; o transform-origin: left bottom;

Ahora podemos rotar el pseudo elemento 45 grados en el sentido de las agujas del reloj con transform : rotate(45deg);

Crear un triángulo con CSS3 paso 2

En este punto, tenemos este CSS :

 .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } 

PASO 3: ocultarlo

Para ocultar las partes no deseadas del pseudo elemento (todo lo que desborda el div con el borde amarillo) solo tiene que configurar el overflow:hidden; en el contenedor. después de quitar el borde amarillo, obtienes … ¡un TRIÁNGULO ! :

MANIFESTACIÓN

Triángulo CSS

CSS:

 .tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; overflow: hidden; } .tr:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); } 

PASO 4: ir más lejos …

Como se muestra en la demostración , puede personalizar los triangularjs:

  1. skewX() más delgados o más planos jugando con skewX() .
  2. Haga que apunten a la izquierda, a la derecha o en cualquier otra dirección jugando con la dirección de rotación y la dirección de transformación.
  3. Haga una reflexión con la propiedad de transformación 3D.
  4. Dale al triángulo los bordes
  5. Pon una imagen dentro del triángulo
  6. Mucho más … ¡Libera los poderes de CSS3 !

¿Por qué usar esta técnica?

  1. Triangle puede responder fácilmente.
  2. Puedes hacer un triángulo con borde .
  3. Puedes mantener los límites del triángulo. Esto significa que puede activar el estado de desplazamiento o hacer clic en evento solo cuando el cursor está dentro del triángulo . Esto puede ser muy útil en algunas situaciones como esta, donde cada triángulo no puede superponer sus vecinos, por lo que cada triángulo tiene su propio estado de vuelo estacionario.
  4. Puede hacer algunos efectos extravagantes como reflections .
  5. Le ayudará a comprender las propiedades de transformación en 2D y 3D.

¿Por qué no usar esta técnica?

  1. El principal inconveniente es la compatibilidad del navegador , las propiedades de transformación 2d son compatibles con IE9 + y, por lo tanto, no puede utilizar esta técnica si planea soportar IE8. Ver CanIuse para más información. Para algunos efectos sofisticados, el uso de transformadas en 3D, como el soporte del navegador de reflections , es IE10 + (ver canIuse para más información).
  2. No necesitas nada receptivo y un triángulo simple está bien para ti, entonces debes ir a la técnica de borde que se explica aquí: una mejor compatibilidad con el navegador y más fácil de entender gracias a las publicaciones sorprendentes aquí.

Aquí hay una animación en JSFiddle que creé para la demostración.

También vea el fragmento a continuación.

Este es un GIF animado hecho de un Screencast

Gif animado del triángulo

 transforms = [ {'border-left-width' :'30', 'margin-left': '70'}, {'border-bottom-width' :'80'}, {'border-right-width' :'30'}, {'border-top-width' :'0', 'margin-top': '70'}, {'width' :'0'}, {'height' :'0', 'margin-top': '120'}, {'borderLeftColor' :'transparent'}, {'borderRightColor' :'transparent'} ]; $('#a').click(function() {$('.border').trigger("click");}); (function($) { var duration = 1000 $('.border').click(function() { for ( var i=0; i < transforms.length; i++ ) { $(this) .animate(transforms[i], duration) } }).end() }(jQuery)) 
 .border { margin: 20px 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } 
   Click it!

Digamos que tenemos el siguiente div:

 

Ahora edite el CSS paso a paso, para que tenga una idea clara de lo que está sucediendo alrededor

PASO 1: JSfiddle Link:

  #triangle { background: purple; width :150px; height:150PX; border-left: 50px solid black ; border-right: 50px solid black; border-bottom: 50px solid black; border-top: 50px solid black; } 

Este es un div simple. Con un CSS muy simple. Entonces un hombre común puede entender. Div tiene dimensiones de 150 x 150 píxeles con el borde de 50 píxeles. La imagen está adjunta:

enter image description here

PASO 2: JSfiddle Link:

 #triangle { background: purple; width :150px; height:150PX; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } 

Ahora acabo de cambiar el color del borde de los 4 lados. La imagen está adjunta.

enter image description here

PASO: 3 JSfiddle Link:

 #triangle { background: purple; width :0; height:0; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; } 

Ahora acabo de cambiar el alto y ancho de div de 150 píxeles a cero. La imagen está adjunta

enter image description here

PASO 4: JSfiddle:

 #triangle { background: purple; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } 

Ahora he hecho todos los bordes transparentes aparte del borde inferior. La imagen se adjunta a continuación.

enter image description here

PASO 5: JSfiddle Link:

 #triangle { background: white; width :0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; } 

Ahora acabo de cambiar el color de fondo a blanco. La imagen está adjunta.

enter image description here

Por lo tanto, obtuvimos el triángulo que necesitábamos.

Y ahora algo completamente diferente …

En lugar de utilizar trucos de CSS, no se olvide de las soluciones tan simples como las entidades html:

  

Resultado:

Ver: ¿Cuáles son las entidades HTML para triangularjs hacia arriba y hacia abajo?

Considera el siguiente triángulo

 .triangle { border-bottom:15px solid #000; border-left:10px solid transparent; border-right:10px solid transparent; width:0; height:0; } 

Esto es lo que se nos da:

Pequeño triángulo de salida

¿Por qué salió en esta forma? El diagtwig a continuación explica las dimensiones, tenga en cuenta que 15px se utilizó para el borde inferior y 10px se utilizó para izquierda y derecha.

Triángulo grande

También es muy fácil hacer un triángulo en ángulo recto al quitar el borde derecho.

Triángulo rectángulo

Llevándolo un paso más allá, usando css basado en esto, agregué flechas a mi espalda y los botones siguientes (sí, sé que no es 100% entre navegadores, pero resbaladizo, sin embargo).

 .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin:20px auto; } .triangle-down { border-bottom:none; border-top: 100px solid red; } .triangle-left { border-left:none; border-right: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-right { border-right:none; border-left: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-after:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid red; margin:0 5px; content:""; display:inline-block; } .triangle-after-right:after { border-right:none; border-left: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .triangle-before:before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid blue; margin:0 5px; content:""; display:inline-block; } .triangle-before-left:before { border-left:none; border-right: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } 
 
Back Next

Enfoque diferente. Con gradiente lineal (para IE, solo IE 10+). Puedes usar cualquier ángulo:

 .triangle { margin: 50px auto; width: 100px; height: 100px; /* linear gradient */ background: -moz-linear-gradient(-45deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* W3C */; } 
 

Esta es una vieja pregunta, pero creo que valdrá la pena compartir cómo crear una flecha usando esta técnica de triángulo.

Paso 1:

Vamos a crear 2 triangularjs, para el segundo usaremos :after pseudoclase y la colocaremos justo debajo de la otra:

2 triángulos

 .arrow{ width: 0; height: 0; border-radius: 50px; display: inline-block; position: relative; } .arrow:after{ content: ""; width: 0; height: 0; position: absolute; } .arrow-up{ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #333; } .arrow-up:after{ top: 5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #ccc; right: -50px; } 
 

CSS clip-path

Esto es algo que siento que esta pregunta ha pasado por alto; clip-path

clip-path en pocas palabras

El recorte, con la propiedad de clip-path , es similar a cortar una forma (como un círculo o un pentágono) a partir de una hoja de papel rectangular. La propiedad pertenece a la especificación ” CSS Masking Module Level 1 “. La especificación establece que “el enmascaramiento CSS proporciona dos medios para ocultar parcial o totalmente porciones de elementos visuales: enmascaramiento y recorte”.

  • Extracto de Smashing Magazine

clip-path usará el elemento en sí mismo en lugar de sus bordes para cortar la forma que especifique en sus parámetros. Utiliza un sistema de coordenadas basado en porcentajes muy simple que hace que editarlo sea muy fácil y significa que puedes levantarlo y crear formas extrañas y maravillosas en cuestión de minutos.


Ejemplo de forma triangular

 div { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: red; width: 100px; height: 100px; } 
 

OK, este triángulo se creará debido a la forma en que los bordes de los elementos funcionan juntos en HTML y CSS …

Como normalmente usamos bordes de 1 o 2 píxeles, nunca notamos que los bordes forman angularjs de 45 ° entre sí con el mismo ancho y si el ancho cambia, el grado de ángulo también cambia, ejecuta el código CSS que creé a continuación:

 .triangle { width: 100px; height: 100px; border-left: 50px solid black; border-right: 50px solid black; border-bottom: 100px solid red; } 
 

SASS (SCSS) triángulo mixin

Escribí esto para que sea más fácil (y SECO) generar automáticamente un triángulo CSS:

 // Triangle helper mixin (by Yair Even-Or) // @param {Direction} $direction - either `top`, `right`, `bottom` or `left` // @param {Color} $color [currentcolor] - Triangle color // @param {Length} $size [1em] - Triangle size @mixin triangle($direction, $color: currentcolor, $size: 1em) { $size: $size/2; $transparent: rgba($color, 0); $opposite: (top:bottom, right:left, left:right, bottom:top); content: ''; display: inline-block; width: 0; height: 0; border: $size solid $transparent; border-#{map-get($opposite, $direction)}-color: $color; margin-#{$direction}: -$size; } 

caso de uso ejemplo:

 span { @include triangle(bottom, red, 10px); } 

Página de juegos


Nota IMPORTANTE:
si el triángulo parece estar pixelado en algunos navegadores, pruebe uno de los métodos que se describen aquí .

Hice una muestra en enjoycss

http://enjoycss.com/5p#border

puedes jugar con él y ver cómo cambia la cosa;)

enter image description here

aquí hay otro violín:

 .container:after { position: absolute; right: 0; content: ""; margin-right:-50px; margin-bottom: -8px; border-width: 25px; border-style: solid; border-color: transparent transparent transparent #000; width: 0; height: 0; z-index: 10; -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; bottom: 21px; } .container { float: left; margin-top: 100px; position: relative; width: 150px; height: 80px; background-color: #000; } .containerRed { float: left; margin-top: 100px; position: relative; width: 100px; height: 80px; background-color: red; } 

https://jsfiddle.net/qdhvdb17/

Otros ya lo han explicado bien. Déjame darte una animación que explicará esto rápidamente: http://codepen.io/chriscoyier/pen/lotjh

Aquí hay un código para que juegues y aprendas los conceptos.

HTML:

   

CSS:

 /*border-width is border thickness*/ #border-demo { background: gray; border-color: yellow blue red green;/*top right bottom left*/ border-style: solid; border-width: 25px 25px 25px 25px;/*top right bottom left*/ height: 50px; width: 50px; } 

Juega con esto y mira lo que sucede. Establecer alto y ancho a cero. Luego, quite el borde superior y haga transparente a izquierda y derecha, o simplemente mire el siguiente código para hacer un triángulo css:

 #border-demo { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 

Casi todas las respuestas se centran en el triángulo construido usando el borde, así que voy a elaborar el método del gradiente lineal (como se inició en la respuesta de @lima_fil ).

Usar un valor de grado como 45 ° nos obligará a respetar una proporción específica de tamaño para obtener el triángulo que queremos y esto no responderá:

 .tri { width:100px; height:100px; background:linear-gradient(45deg, transparent 50%,red 0); /*To illustrate*/ border:1px solid; } 
 Good one 
bad one
bad one