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




8 Answers

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.

border generador figuras

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?




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



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

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. Así que un laico puede entender. Div tiene unas dimensiones de 150 x 150 píxeles con el borde de 50 píxeles. La imagen se adjunta:

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.

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

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.

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.

De ahí tenemos el triángulo que necesitábamos.




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




Esta es una pregunta antigua, 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 usaremos :after pseudo class y lo posicionaremos justo debajo del otro:

.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 en el mismo color del fondo:

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

Violín con todas las flechas:
http://jsfiddle.net/tomsarduy/r0zksgeu/




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/




Related