triangulos - ¿Cómo funcionan los triángulos CSS?




triangulos css (12)

Triángulos CSS: Una tragedia en cinco actos

Como dijo alex , los bordes de igual anchura se topan entre sí en ángulos de 45 grados:

Cuando no tienes un borde superior, se ve así:

Entonces le das un ancho de 0 ...

... y una altura de 0 ...

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

Eso resulta en un triángulo.

Hay muchas formas diferentes de CSS en CSS Tricks - Shapes of CSS y estoy particularmente confundido con un triángulo:

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


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

Ejemplo de caso de uso:

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

Página de juegos

Nota IMPORTANTE:
Si el triángulo parece pixelado en algunos navegadores, pruebe uno de los métodos descritos 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/


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

También vea el fragmento a continuación.

Este es un GIF animado hecho de un Screencast

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>

Todo a la vez version

$('#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>


Comience con un cuadrado básico y bordes. Cada borde tendrá 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;
}

lo que te da this :

this

Pero no es necesario el borde superior, así que establece su ancho a 0px . Ahora, nuestro borde inferior de 200px hará que nuestro triángulo tenga una altura de 200 px.

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

y obtendremos this :

this

Luego, para ocultar los dos triángulos laterales, establezca el color del borde como transparente. Dado que el borde superior se ha eliminado de manera efectiva, también podemos establecer el color de borde superior en transparente.

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

finalmente conseguimos this :

this


Considera el triángulo de abajo

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

¿Por qué salió en esta forma? El siguiente diagrama explica las dimensiones, tenga en cuenta que se utilizaron 15 px para el borde inferior y 10 píxeles para el derecho e izquierdo.

Es bastante fácil hacer un triángulo rectángulo también quitando el borde derecho.


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


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

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

  • Nota 1: para los triángulos no isósceles y cosas de fantasía, puede ver el paso 4 .
  • Nota 2: en los siguientes fragmentos, los prefijos del proveedor no están incluidos. Se incluyen en las demostraciones de 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 . Puede usar cualquier técnica ( vea aquí ), incluido el uso de porcentajes y el relleno del 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 del padre. El pseudo elemento tiene un fondo azul en la siguiente imagen.

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: definir un origen de transformación . El origen predeterminado está en el centro del pseudo-elemento y lo necesitamos en la parte inferior izquierda. Añadiendo 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);

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

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

DEMO

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 triángulos:

  1. Haz que sean más delgados o más planos jugando con skewX() .
  2. Haz que apunten hacia la izquierda, hacia la derecha o en cualquier otra dirección jugando con la transformación orign y la dirección de rotación.
  3. Hacer alguna reflexión con la propiedad transformar 3D.
  4. Dar los bordes triangulares.
  5. Pon una imagen dentro del triángulo.
  6. Mucho más ... ¡Desata los poderes de CSS3 !

¿Por qué utilizar esta técnica?

  1. Triángulo puede ser fácilmente sensible.
  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 el 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 superponerse a sus vecinos, por lo que cada triángulo tiene su propio estado de desplazamiento.
  4. Puedes hacer algunos efectos de fantasía como reflejos .
  5. Te ayudará a entender las propiedades de transformación 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 usar esta técnica si planea admitir IE8. Vea CanIuse para más información. Para algunos efectos sofisticados, el uso de transformaciones 3d como la compatibilidad con el navegador de reflexión es IE10 + (consulte canIuse para obtener más información).
  2. No necesitas nada que responda y un triángulo plano es bueno para ti, entonces deberías optar por la técnica de borde que se explica aquí: mejor compatibilidad con el navegador y más fácil de entender gracias a las increíbles publicaciones aquí.

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

jsFiddle .

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


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:

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</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 que pasa. Ajuste la altura y el ancho a cero. Luego elimine el borde superior y haga transparentes a la izquierda y la derecha, o simplemente mire el código a continuación para hacer un triángulo css:

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

Yendo un paso más allá, usando css basado en esto, agregué flechas a mi espalda y a los siguientes botones (sí, sé que no es un 100% de navegador cruzado, pero que no es muy elegante).

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


De acuerdo, este triángulo se creará debido a la forma en que los bordes de los elementos trabajan juntos en HTML y CSS ...

Como usualmente usamos bordes de 1 o 2px, nunca notamos que los bordes formen ángulos de 45 ° entre sí con el mismo ancho y si el ancho cambia, el grado del ángulo también se modifica, ejecute el código CSS que he creado a continuación:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

Luego, en el siguiente paso, no tenemos ancho ni altura, algo como esto:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}
<div class="triangle">
</div>

Y ahora hacemos invisibles los bordes izquierdo y derecho para hacer nuestro triángulo deseable como se muestra a continuación:

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

Si no está dispuesto a ejecutar el fragmento para ver los pasos, he creado una secuencia de imágenes para ver todos los pasos en una imagen:





css-shapes