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

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:

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

Entonces le das un ancho de 0 ...

... y una altura de 0 ...

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

Eso da como resultado un triángulo.

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

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.

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 :

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 :

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 :

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:

• Enlace a la ANIMACIÓN: Cómo hacer un triángulo CSS3 .
• Y DEMO: triángulos 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 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.

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

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

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

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

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

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:

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

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

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

Y ahora algo completamente diferente ...

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

▲

Resultado:

▲

Ver: ¿Cuáles son las entidades HTML para los triángulos arriba y 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:

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

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

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>

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:

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

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

• Extracto de la revista Smashing

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.

• Clippy - Un clip-pathgenerador
• El archivo de recomendación del candidato del W3C
• clip-pathDocumentación de MDN
• clip-path Soporte de navegador

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:

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

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

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

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

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

Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

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

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri-1"></div>
<div class="tri-2"></div>

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.

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri"></div>

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

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:

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

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

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

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

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

<div class="tri-1"></div>

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

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:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

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:

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="transform:skewY(25deg)"></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>


<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

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

svg {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>

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:

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

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>

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>

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>