¿Cómo funcionan los triángulos CSS?

1847

Hay muchas formas CSS diferentes en CSS Tricks - Formas de CSS y estoy particularmente perplejo 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?

Stanislav Shabalin
fuente
59
Puedes: jsfiddle.net/wbZet
mskfisher
55
¿Qué tal el cuadrado que no está allí? jsfiddle.net/minitech/sZgaa
Ry-
1
@mskfisher ¿El tamaño del borde inferior de su triángulo equilátero no debe ser ceil (sqrt (3) * 60)? ¡Unos pocos píxeles más entonces!
Niloct
1
@Niloct: lo analicé rápidamente en números redondos. Tienes razón, las medidas equiláteras más precisas serían (lado: 58, abajo: 100) o (lado: 60, abajo: 104).
mskfisher
1
Aquí hay un gran generador de triángulos CSS para todas las direcciones y tamaños: apps.eky.hk/css-triangle-generator
Allan Stepps

Respuestas:

2240

Triángulos CSS: una tragedia en cinco actos

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

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

Cuando no tiene un 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 da como resultado un triángulo.

sdleihssirhc
fuente
10
@Jauzsika, puede agregar estos triángulos en una página sin agregar elementos adicionales simplemente usando :beforeo :afterpseudo clases.
zzzzBov
stackoverflow.com/questions/5623072/… es a lo que se refiere el Sr. BoltClock.
thirtydot
99
Actúa con animaciones: jsfiddle.net/pimvdb/mA4Cu/104 . Solo para aquellos de nosotros que necesitamos aún más pruebas visuales como yo ... ''
dijo el
Con un triángulo diferente left-bordery right-borderno isósceles se puede hacer. Y cuando se combinan muchos triángulos ... jsfiddle.net/zRNgz
JiminP
2
En 2018, ¿hay una mejor manera de hacer un triángulo con CSS en lugar de usar este truco?
Scribblemacher
519

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

Ejemplo de borde

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}
<div></div>

Echa un vistazo a jsFiddle .

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

alex
fuente
487

Comience con un cuadrado básico y bordes. Cada borde recibirá 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 hay necesidad del borde superior, por lo tanto, establezca su ancho en 0px. Ahora nuestro borde inferior 200pxhará que nuestro triángulo tenga 200px de altura.

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

y conseguiremos esto :

mitad inferior del cuadrado con cuatro bordes

Luego, para ocultar los dos triángulos laterales, configure el color del borde como transparente. Dado que el borde superior se ha eliminado efectivamente, también podemos establecer el color superior del borde 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

Mouna Cheikhna
fuente
21
Fresco, pero no es ésta la misma manera? :-)
Stanislav Shabalin
55
There's another way to draw .., que resulta ser de la misma manera :) Sin embargo
Hammad Khan
16
-1 para usar archivos JPEG con artefactos masivos. Pero +1 para crear un gran ejemplo de cuándo no usar archivos JPEG que puedo vincular en el futuro para disuadirme. ;)
Henrik Heimbuerger
3
¿Por qué no se usa un gif aquí?
prusswan
44
Lo siento @hheimbuerger, arruiné tu ejemplo arreglando las imágenes. Tendrá que vincular a la revisión 2 de esta respuesta en el futuro.
Rory O'Kane
263

Enfoque diferente:

Triángulos 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 explica cómo funciona esta técnica aquí es:

animación gif: cómo hacer un triángulo 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 rectángulo isósceles con un elemento.

  • Nota 1: para triángulos no isósceles y cosas elegantes, puede ver el paso 4 .
  • Nota 2: en los siguientes fragmentos, no se incluyen los prefijos de proveedor. están incluidos 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 eso width = 1.41 x height. Puede usar cualquier techinque ( ver 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, inserte un pseudo elemento y dele 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 transformación 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: Rotemos

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. 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 sentido horario con transform : rotate(45deg);

Creando 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 necesita configurarlo 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: ve más allá ...

Como se muestra en la demostración , puede personalizar los triángulos:

  1. Hazlos más delgados o más planos jugando con ellos skewX().
  2. Haga que apunten a la izquierda, a la derecha o a cualquier otra dirección jugando con la transformación, el orden y la dirección de rotación.
  3. Hacer alguna reflexión con la transformación 3D propiedad.
  4. Dale los bordes del triángulo
  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 el evento solo cuando el cursor está dentro del triángulo . Esto puede ser muy útil en algunas situaciones como esta. en las que cada triángulo no puede superponerse a sus vecinos, por lo que cada triángulo tiene su propio estado de desplazamiento.
  4. Puede hacer algunos efectos elegantes como los reflejos .
  5. Le ayudará a comprender 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 utilizar esta técnica si planea admitir IE8. Ver CanIuse para más información. Para algunos efectos sofisticados, el uso de transformaciones 3D, como el soporte del navegador de reflexión , es IE10 + (consulte canIuse para obtener más información).
  2. No necesita nada que responda y un triángulo plano está bien para usted, entonces debe optar por la técnica de borde explicada aquí: mejor compatibilidad del navegador y más fácil de entender gracias a las publicaciones sorprendentes aquí.
web-tiki
fuente
16
Probablemente valga la pena mencionar que 1.41 es una aproximación de √2 y la longitud de la hipotenusa del triángulo que crea, por lo que necesita (al menos) ese ancho.
KRyan
Quería mantener la respuesta simple pero tienes razón, debería mencionarse @KRyan
web-tiki
En realidad, al tratar de usar esto, skewXsería útil mencionar cómo se derivaron los diferentes anchos para usar .
KRyan
1
Este método funciona mejor cuando necesita un borde sólido de 1 px para el triángulo.
Roman Losev
Esto es para el caso de que desee crear bordes para el triángulo, estaba atascado con los bordes cuando quiero crear este cuadro de anotación AnnotationBox
vanduc1102
183

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

Ver también el fragmento a continuación.

Este es un GIF animado hecho de un Screencast

Gif Animado de Triángulo


Versión aleatoria


Versión a la vez

Yunzen
fuente
49

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: Enlace JSfiddle:

 #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 simple div. Con un CSS muy simple. Para que un laico pueda entender. Div tiene dimensiones de 150 x 150 píxeles con el borde de 50 píxeles. Se adjunta la imagen:

ingrese la descripción de la imagen aquí

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.

ingrese la descripción de la imagen aquí

PASO: 3 Enlace JSfiddle:

#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 la altura y el ancho de div de 150 píxeles a cero. Se adjunta la imagen

ingrese la descripción de la imagen aquí

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.

ingrese la descripción de la imagen aquí

PASO 5: Enlace JSfiddle:

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

ingrese la descripción de la imagen aquí

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

Rai Ammad Khan
fuente
3
¿Por qué usaste un portal abisal para el primer paso?
LuizLoyola
38

Y ahora algo completamente diferente ...

En lugar de usar trucos css, no se olvide de soluciones tan simples como entidades html:

&#9650;

Resultado:

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

Comunidad
fuente
2
No creo que "golpeado" sea una palabra apropiada aquí. La solución se basa en las métricas de la fuente, por lo que el posicionamiento preciso es bastante dudoso, sin mencionar que no tiene control sobre la forma.
user776686
32

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:

Salida triangular pequeña

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

Triángulo grande

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

Triángulo rectángulo

Daniel Imms
fuente
29

Yendo un paso más allá, usando CSS basado en esto, agregué flechas a mis botones Atrás y Siguiente (sí, sé que no es 100% de navegador cruzado, pero de todos modos resbaladizo).

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

PseudoNinja
fuente
1
¿Cómo es esto no navegador cruzado? los triángulos deberían volver a IE6.
chriscauley
44
El uso de: before y: after no es 100% compatible.
PseudoNinja
2
Los elementos psuedo no son compatibles <IE8.
alex
19

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

Como usualmente usamos bordes de 1 o 2 píxeles, nunca notamos que los bordes forman ángulos de 45 ° entre sí con el mismo ancho y si el ancho cambia, el grado del á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;
}
<div class="triangle">
</div>

Luego, en el siguiente paso, no tenemos ancho ni alto, 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:

ingrese la descripción de la imagen aquí

Alireza
fuente
18

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

lima_fil
fuente
Esta es una solución hermosa, pero debe tenerse en cuenta que solo es IE 10+.
Eric Hu
13

CSS clip-path

Esto es algo que siento que esta pregunta se ha perdido; clip-path

clip-path en una palabra

Recortar, con la clip-pathpropiedad, es similar a cortar una forma (como un círculo o un pentágono) de una hoja rectangular de papel. 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 partes de elementos visuales: enmascaramiento y recorte".


clip-pathutilizará el elemento en sí en lugar de sus bordes para cortar la forma que especifique en sus parámetros. Utiliza un sistema de coordenadas basado en porcentajes súper simple que hace que la edición sea muy fácil y significa que puede recogerlo y crear formas extrañas y maravillosas en cuestión de minutos.


Ejemplo de forma de triángulo

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


Abajo

Tiene una desventaja importante en este momento, una de ellas es su gran falta de soporte, solo está realmente cubierto en los -webkit-navegadores y no tiene soporte en IE y solo es muy parcial en FireFox.


Recursos

Aquí hay algunos recursos y materiales útiles para ayudar a comprender mejor clip-pathy también comenzar a crear los suyos.

Stewartside
fuente
11

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 utilizaremos la :afterpseudo clase y la colocaremos justo debajo del otro:

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

Paso 2

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

ingrese la descripción de la imagen aquí

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

Tom Sarduy
fuente
9

Mezcla triangular SASS (SCSS)

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

vsync
fuente
8

Si desea aplicar un borde al triángulo, lea esto: ¿ Crear un triángulo con CSS?

Casi todas las respuestas se centran en el triángulo construido usando el borde, así que voy a elaborar el linear-gradientmétodo (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 height/widthpara obtener el triángulo que queremos y esto no responderá:

En lugar de hacer esto, deberíamos considerar valores predefinidos de dirección como to bottom, to topetc. En este caso podemos obtener cualquier tipo de forma de triángulo mientras lo mantenemos receptivo.

1) triángulo rectángulo

Para obtener dicha triángulo necesitamos uno lineal-gradiente y una dirección diagonal como to bottom right, to top left, to bottom left, etc

2) triángulo isósceles

Para este, necesitaremos 2 gradientes lineales como el anterior y cada uno tomará la mitad del ancho (o la altura). Es como si creáramos una imagen especular del primer triángulo.

3) triángulo equilátero

Este es un poco complicado de manejar ya que necesitamos mantener una relación entre la altura y el ancho del gradiente. Tendremos el mismo triángulo que el anterior pero haremos que el cálculo sea más complejo para transformar el triángulo isósceles en uno equilátero.

Para facilitarlo, consideraremos que se conoce el ancho de nuestro div y que la altura es lo suficientemente grande como para poder dibujar nuestro triángulo dentro ( height >= width).

Triángulo CSS con gradiente

Tenemos nuestros dos gradientes g1y g2, la línea azul es el ancho del div wy cada gradiente tendrá el 50% ( w/2) y cada lado del triángulo debería ser igual a w. La línea verde es la altura de ambos gradientes hgy podemos obtener fácilmente la siguiente fórmula:

(w/2)² + hg² = w²---> hg = (sqrt(3)/2) * w--->hg = 0.866 * w

Podemos confiar calc()para hacer nuestro cálculo y obtener el resultado necesario:

Otra forma es controlar la altura de div y mantener la sintaxis de gradiente fácil:

4) triángulo aleatorio

Para obtener un triángulo aleatorio, es fácil ya que simplemente necesitamos eliminar la condición del 50% de cada uno, PERO debemos mantener dos condiciones (ambas deben tener la misma altura y la suma de ambas anchuras debe ser del 100%).

Pero, ¿qué pasa si queremos definir un valor para cada lado? ¡Simplemente necesitamos hacer el cálculo nuevamente!

Triángulo CSS con gradiente

Definamos hg1y hg2como la altura de nuestro gradiente (ambos son iguales a la línea roja) entonces wg1y wg2como el ancho de nuestro gradiente ( wg1 + wg2 = a). No voy a detallar el cálculo pero al final tendremos:

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

Ahora hemos alcanzado el límite de CSS, ya que incluso con calc()no podremos implementar esto, así que simplemente necesitamos recopilar el resultado final manualmente y usarlo como tamaño fijo:

Prima

No debemos olvidar que también podemos aplicar rotación y / o sesgo y tenemos más opciones para obtener más triángulo:

Y, por supuesto, debemos tener en cuenta la solución SVG que puede ser más adecuada en alguna situación:

Temani Afif
fuente
4

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/

Doml The-Bread
fuente
4

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 qué pasa. Establezca la altura y el ancho en cero. Luego quite el borde superior y haga transparente a la izquierda y a 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;
}
HelloWorldNoMore
fuente
2

Si quieres jugar con border-size, widthy heightpara ver cómo los que pueden crear diferentes formas, intente lo siguiente:

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}
<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

Danziger
fuente
1

Prueba esto:-

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}
<div class="triangle"></div>

satish mallick
fuente
0

Sé que este es antiguo, pero me gustaría agregar a esta discusión que hay al menos 5 métodos diferentes para crear un triángulo usando solo HTML y CSS.

  1. Utilizando borders
  2. Utilizando linear-gradient
  3. Utilizando conic-gradient
  4. Usando transformyoverflow
  5. Utilizando clip-path

Creo que todos se han cubierto aquí, excepto el método 3, que usa el conic-gradient, así que lo compartiré aquí:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }
<div class="triangle"></div>

Crear triángulos CSS con gradiente cónico

coding-dude.com
fuente