Pregunta ¿Cómo funcionan los triángulos CSS?


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

CSS Triangle

#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?


1633
2017-08-16 03:54


origen


Respuestas:


Triángulos CSS: una tragedia en cinco actos

Como dijo alex, bordes del mismo ancho que se juntan en ángulos de 45 grados:

borders meet at 45 degree angles, content in middle

Cuando no tiene borde superior, se ve así:

no top border

Entonces le das un ancho de 0 ...

no width

... y una altura de 0 ...

no height either

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

transparent side borders

Eso resulta en un triángulo.


2054
2017-08-16 04:11



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

Border example

jsFiddle.

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


484
2017-08-16 03:58



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 esta:

square with four borders

Pero no es necesario el borde superior, así que configure su ancho para 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 esta:

bottom half of square with four borders

Luego, para ocultar los dos triángulos 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 esta:

triangular bottom border


436
2017-08-17 11:16



Enfoque diferente:

Triángulos CSS3 con transformar 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á:

gif animation : how to make a triangle with transform rotate

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 triángulos 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 el demostraciones codepen.
  • Nota 3: el HTML para la siguiente explicación es siempre:  <div class="tr"></div>

PASO 1 : Haz un div

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

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

Making a CSS triangle with transform roate step 1

En este punto, tenemos esto 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: definir un origen de transformación. los origen predeterminado está en el centro del pseudo elemento y lo necesitamos en la parte inferior izquierda. Al agregar esto 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);

Creating a triangle with CSS3 step 2

En este punto, tenemos esto 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 necesita establecer overflow:hidden; en el contenedor. después de quitar el borde amarillo, obtienes ... un TRIÁNGULO! :

MANIFESTACIÓN

CSS triangle

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 el manifestación, puedes personalizar los triángulos:

  1. Hazlos 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. Hacer alguna reflexión con propiedad de transformación 3D.
  4. Dar el triángulo fronteras
  5. Pon una imagen dentro del triángulo
  6. Mucho más ... desata 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 éste donde cada triángulo no puede superponerse es vecinos, por lo que cada triángulo tiene su propio estado de vuelo estacionario.
  4. Puedes hacer un poco efectos de lujo como reflejos.
  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 el compatibilidad con el navegador, las propiedades de transformación 2d son compatibles con IE9 + y, por lo tanto, no puede usar esta técnica si planea soportar IE8. Ver Puedo usar para más información. Para algunos efectos sofisticados usando transformadas en 3D como el reflejo El soporte del navegador es IE10 + (ver Puedo usar 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í.

214
2017-07-17 16:30



Aquí hay un animación en JSFiddle Creé para la demostración.

También vea el fragmento a continuación.

Este es un GIF animado hecho de un Screencast

Animated Gif of Triangle

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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


Versión aleatoria

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

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'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#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: 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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


Versión todo a la vez

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))
.border {
    margin: 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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


156
2017-11-29 11:21



Digamos que tenemos el siguiente div:

<div id="triangle" />

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

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


39
2018-06-17 06:09



Y ahora algo completamente diferente ...

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

&#9650;

Resultado:

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


35
2017-12-01 12:40



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:

Small triangle output

¿Por qué salió en esta forma? El diagrama 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.

Large triangle

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

Right angle triangle


29
2018-03-21 11:20



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;

}
<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>


27
2017-12-30 16:56



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 */;
}
<div class="triangle"></div>

Aquí está jsfiddle


15
2017-07-26 00:19



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 triángulos, para el segundo vamos a usar el :after pseudo clase y colocarlo justo debajo del otro:

2 triangles

.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;
    }
<div class="arrow arrow-up"> </div>

Paso 2

Ahora solo tenemos que establecer el color del borde predominante del segundo triángulo con el mismo color de fondo:

enter image description here

.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 #fff;
         right: -50px;
    }
<div class="arrow arrow-up"> </div>

Fiddle con todas las flechas:
http://jsfiddle.net/tomsarduy/r0zksgeu/


9
2017-07-31 20:42