Existem muitas formas CSS diferentes em CSS Tricks - Shapes of CSS e estou particularmente intrigado com um 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>

Como e por que isso funciona?

Triângulos CSS: uma tragédia em cinco atos

Como alex disse , bordas de largura igual se encaixam em ângulos de 45 graus:

Quando você não tem borda superior, fica assim:

Então você dá uma largura de 0 ...

... e uma altura de 0 ...

... e, finalmente, você torna as duas bordas laterais transparentes:

Isso resulta em um triângulo.

As bordas usam uma borda angular onde se cruzam (ângulo de 45 ° com bordas de largura igual, mas alterar as larguras da borda pode inclinar o ângulo).

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

<div></div>

Dê uma olhada no jsFiddle .

Ao ocultar certas bordas, você pode obter o efeito triângulo (como você pode ver acima, tornando as diferentes partes diferentes de cores). transparenté frequentemente usado como uma cor da borda para obter a forma do triângulo.

Comece com um quadrado básico e bordas. Cada borda terá uma cor diferente para que possamos diferenciá-las:

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

o que lhe dá o seguinte :

Mas não há necessidade da borda superior, então defina sua largura para 0px. Agora, nossa borda inferior 200pxfará nosso triângulo com 200px de altura.

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

e nós vamos conseguir isso :

Para ocultar os dois triângulos laterais, defina a cor da borda como transparente. Como a borda superior foi efetivamente excluída, também podemos definir a cor da borda superior como transparente.

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

finalmente entendemos isso :

Abordagem diferente:

Triângulos CSS3 com transformação rotativa

A forma triangular é muito fácil de fazer usando essa técnica. Para as pessoas que preferem ver uma animação explicando como essa técnica funciona aqui, é:

• Link para a ANIMATION: Como fazer um triângulo CSS3 .
• E DEMO: triângulos CSS3 feitos com rotação rotativa.

Caso contrário, aqui está uma explicação detalhada em 4 atos (isto não é uma tragédia) de como fazer um triângulo isósceles em ângulo reto com um elemento.

• Nota 1: para triângulos não isósceles e coisas sofisticadas, você pode ver a etapa 4 .
• Nota 2: nos seguintes trechos, os prefixos do fornecedor não estão incluídos. eles estão incluídos nas demos codepen .
• Nota 3: o HTML para a seguinte explicação é sempre: <div class="tr"></div>

PASSO 1 : Faça uma div

Fácil, apenas certifique-se disso width = 1.41 x height. Você pode usar qualquer técnica ( veja aqui ), incluindo o uso de porcentagens e o fundo de preenchimento para manter a proporção e fazer uma triângulo responsivo . Na imagem a seguir, a div tem uma borda amarela dourada.

Nessa div, insira um pseudo elemento e forneça 100% de largura e altura do pai. O pseudo elemento tem um fundo azul na imagem a seguir.

Neste ponto, temos 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;
}

PASSO 2 : Vamos rodar

Primeiro, o mais importante: defina uma origem de transformação . A origem padrão está no centro do pseudo-elemento e precisamos dela no canto inferior esquerdo. Adicionando este CSS ao pseudo elemento:

transform-origin:0 100%; ou transform-origin: left bottom;

Agora podemos girar o pseudo elemento 45 graus no sentido horário com transform : rotate(45deg);

Neste ponto, temos 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);
}

PASSO 3: oculte

Para ocultar as partes indesejadas do pseudo-elemento (tudo que excede a div com a borda amarela), basta definir overflow:hidden;no contêiner. depois de remover a borda amarela, você obtém ... um 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);
}

PASSO 4: vá além ...

Como mostrado na demonstração , você pode personalizar os triângulos:

1. Torne-os mais finos ou lisos, jogando com skewX() .
2. Faça-os apontar para a esquerda, direita ou qualquer outra direção, jogando com a direção de transformação e a direção de rotação.
3. Faça alguma reflexão com a propriedade de transformação 3D.
4. Dê as bordas do triângulo
5. Coloque uma imagem dentro do triângulo
6. Muito mais ... Liberte os poderes do CSS3 !

Por que usar essa técnica?

1. Triângulo pode facilmente ser responsivo.
2. Você pode fazer um triângulo com borda .
3. Você pode manter os limites do triângulo. Isso significa que você pode acionar o estado de foco ou clicar no evento apenas quando o cursor estiver dentro do triângulo . Isso pode se tornar muito útil em algumas situações como esta, em que cada triângulo não pode sobrepor seus vizinhos, portanto cada triângulo tem seu próprio estado de foco.
4. Você pode fazer alguns efeitos extravagantes, como reflexões .
5. Isso o ajudará a entender as propriedades de transformação 2D e 3D.

Por que não usar essa técnica?

1. A principal desvantagem é a compatibilidade do navegador , as propriedades de transformação 2D são suportadas pelo IE9 + e, portanto, você não pode usar essa técnica se planeja dar suporte ao IE8. Veja CanIuse para mais informações. Para alguns efeitos extravagantes, usar transformações 3D como o suporte ao navegador de reflexão é o IE10 + (consulte canIuse para obter mais informações).
2. Você não precisa de nada responsivo e um triângulo simples é bom para você; então, você deve seguir a técnica de borda explicada aqui: melhor compatibilidade do navegador e mais fácil de entender, graças às publicações amaizing aqui.

Aqui está uma animação no JSFiddle que criei para demonstração.

Veja também o snippet abaixo.

Este é um GIF animado criado a partir de um 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>

Versão aleatória

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

Versão de uma só 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>

Vamos dizer que temos a seguinte div:

<div id="triangle" />

Agora edite o CSS passo a passo, para ter uma ideia clara do que está acontecendo ao redor

PASSO 1: Link do 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;
    }

Esta é uma div simples. Com um CSS muito simples. Para que um leigo possa entender. Div tem dimensões 150 x 150 pixels com a borda 50 pixels. A imagem está anexada:

PASSO 2: Link do JSfiddle:

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

Agora mudei a cor da borda dos quatro lados. A imagem está anexada.

PASSO: 3 Link do 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;
}

Agora mudei a altura e a largura da div de 150 pixels para zero. A imagem está anexada

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

Agora, tornei todas as bordas transparentes, além da borda inferior. A imagem está anexada abaixo.

PASSO 5: Link do 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;
}

Agora mudei a cor de fundo para branco. A imagem está anexada.

Por isso, conseguimos o triângulo que precisávamos.

E agora algo completamente diferente ...

Em vez de usar truques de css, não se esqueça de soluções simples como entidades html:

▲

Resultado:

▲

Consulte: Quais são as entidades HTML para triângulos para cima e para baixo?

Considere o triângulo abaixo

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

Isto é o que nos é dado:

Por que saiu dessa forma? O diagrama abaixo explica as dimensões, observe que 15 px foram usados ​​na borda inferior e 10 px na esquerda e direita.

É muito fácil criar um triângulo de ângulo reto também removendo a borda direita.

Dando um passo adiante, usando o css com base nisso, adicionei setas nos botões voltar e próximo (sim, eu sei que não é 100% cross-browser, mas é liso).

.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, esse triângulo será criado devido à maneira como as bordas dos elementos funcionam juntas em HTML e CSS ...

Como geralmente usamos bordas de 1 ou 2px, nunca notamos que as bordas fazem um ângulo de 45 ° entre si com a mesma largura e, se a largura mudar, o grau do ângulo também será alterado, execute o código CSS que criei abaixo:

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

No próximo passo, não temos largura ou altura, algo como isto:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

<div class="triangle">
</div>

E agora tornamos as bordas esquerda e direita invisíveis para tornar nosso triângulo desejável como abaixo:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div class="triangle"></div>

Se você não deseja executar o snippet para ver as etapas, criei uma sequência de imagens para ver todas as etapas em uma imagem:

Abordagem diferente. Com gradiente linear (para o IE, apenas IE 10+). Você pode usar qualquer â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>

Aqui está o jsfiddle

CSS clip-path

Isso é algo que eu sinto que essa pergunta perdeu; clip-path

clip-path em poucas palavras

Recortar, com a clip-pathpropriedade, é semelhante a cortar uma forma (como um círculo ou um pentágono) de um pedaço de papel retangular. A propriedade pertence à especificação " CSS Masking Module Level 1 ". A especificação declara: “O mascaramento CSS fornece dois meios para ocultar parcial ou totalmente partes dos elementos visuais: mascaramento e recorte”.

• Extrato da Revista Smashing

clip-pathusará o próprio elemento em vez de suas bordas para cortar a forma especificada em seus parâmetros. Ele usa um sistema de coordenadas baseado em porcentagem super simples, que facilita a edição e significa que você pode pegá-lo e criar formas estranhas e maravilhosas em questão de minutos.

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

Desvantagem

No momento, ele tem uma grande desvantagem, sendo uma grande falta de suporte, sendo realmente coberto por -webkit-navegadores e não tendo suporte no IE e apenas muito parcial no FireFox.

Recursos

Aqui estão alguns recursos e materiais úteis para ajudar a entender melhor clip-pathe também começar a criar os seus próprios.

• Clippy - Um clip-pathgerador
• O arquivo de recomendação de candidato do W3C
• clip-pathDocumentação MDN
• clip-path Suporte do navegador

Essa é uma pergunta antiga, mas acho que vale a pena compartilhar como criar uma flecha usando essa técnica de triângulo.

Passo 1:

Vamos criar 2 triângulos, para o segundo usaremos a :afterpseudo classe e a posicionaremos logo abaixo da outra:

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

Passo 2

Agora, basta definir a cor predominante da borda do segundo triângulo para a mesma cor do plano de fundo:

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

Mexa com todas as setas:
http://jsfiddle.net/tomsarduy/r0zksgeu/

Mixagem de triângulo SASS (SCSS)

Eu escrevi isso para tornar mais fácil (e SECO) gerar automaticamente um 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;
}

exemplo de caso de uso:

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

Página de recreio

Nota importante:
se o triângulo parecer pixelizado em alguns navegadores, tente um dos métodos descritos aqui .

^{Se você deseja aplicar uma borda ao triângulo, leia isto: Crie um triângulo com CSS?}

Quase todas as respostas se concentram no triângulo construído usando borda, por isso vou elaborar o linear-gradientmétodo (como iniciado na resposta de @lima_fil ).

Usar um valor de grau como 45°nos forçará a respeitar uma proporção específica de height/width, a fim de obter o triângulo que queremos e isso não será responsivo:

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

Em vez de fazer isso, devemos considerar valores predefinidos de direção como to bottom, to topetc. Nesse caso, podemos obter qualquer tipo de forma de triângulo, mantendo-a responsiva.

1) triângulo retângulo

Para obter tal triângulo precisamos de um gradiente linear e uma direcção 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, precisaremos de 2 gradientes lineares, como acima, e cada um terá metade da largura (ou altura). É como se criamos uma imagem espelhada do primeiro 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 é um pouco complicado de manusear, pois precisamos manter uma relação entre a altura e a largura do gradiente. Teremos o mesmo triângulo acima, mas tornaremos o cálculo mais complexo para transformar o triângulo isósceles em um equilátero.

Para facilitar, consideraremos que a largura da nossa div é conhecida e a altura é grande o suficiente para desenhar o triângulo dentro ( height >= width).

Temos nossos dois gradientes g1e g2, a linha azul é a largura do div we cada gradiente terá 50% dele ( w/2) e cada lado do triângulo deve ser igual a w. A linha verde é a altura dos dois gradienteshg e podemos obter facilmente a fórmula abaixo:

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

Podemos confiar calc()para fazer nosso cálculo e obter o resultado necessário:

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

Outra maneira é controlar a altura da div e manter a sintaxe do 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 aleatório

Para obter um triângulo aleatório, é fácil, simplesmente precisamos remover a condição de 50% de cada um, MAS devemos manter duas condições (ambas devem ter a mesma altura e a soma de ambas as larguras deve ser 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>

Mas e se quisermos definir um valor para cada lado? Simplesmente precisamos fazer o cálculo novamente!

Vamos definir hg1e hg2como a altura do nosso gradiente (ambos são iguais à linha vermelha) então wg1e wg2como a largura do nosso gradiente ( wg1 + wg2 = a). Não vou detalhar o cálculo, mas no final teremos:

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

Agora atingimos o limite de CSS, pois, mesmo calc()assim, não poderemos implementar isso; precisamos reunir o resultado final manualmente e usá-los como tamanho fixo:

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

Bônus

Não devemos esquecer que também podemos aplicar rotação e / ou inclinação e temos mais opções para obter mais 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>

E, é claro, devemos ter em mente a solução SVG que pode ser mais adequada em algumas situações:

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>

aqui está outro violino:

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

Outros já explicaram isso bem. Deixe-me dar uma animação que explicará isso rapidamente: http://codepen.io/chriscoyier/pen/lotjh

Aqui está um código para você brincar e aprender os conceitos.

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

Brinque com isso e veja o que acontece. Defina altura e largura como zero. Em seguida, remova a borda superior e torne a esquerda e a direita transparentes ou apenas olhe o código abaixo para criar um triângulo css:

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

Se você quiser brincar com border-size, widthe heightpara ver como os pode criar formas diferentes, tente o seguinte:

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>

Tente isto: -

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

<div class="triangle"></div>

Sei que é antigo, mas gostaria de acrescentar a esta discussão que existem pelo menos 5 métodos diferentes para criar um triângulo usando apenas HTML e CSS.

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

Eu acho que todos foram abordados aqui, exceto o método 3, usando o conic-gradient, então vou compartilhá-lo aqui:

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

<div class="triangle"></div>