Como os triângulos CSS funcionam?


1846

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

Como e por que isso funciona?


59

55
E a praça que não está lá? jsfiddle.net/minitech/sZgaa
Ry-

1
@mskfisher O tamanho da borda inferior do triângulo equilátero não deve ser o teto (sqrt (3) * 60)? Mais alguns pixels então!
Niloct 17/08/11

1
@Niloct: Eu olhei rapidamente para números redondos. Você está certo, as medidas equilaterais mais precisas seriam (lado: 58, inferior: 100) ou (lado: 60, inferior: 104).
mskfisher

1
Aqui está um grande gerador de CSS triângulo para todas as direções e tamanhos: apps.eky.hk/css-triangle-generator
Allan Stepps

Respostas:


2239

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

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

as bordas se encontram em ângulos de 45 graus, o conteúdo no meio

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

sem borda superior

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

sem largura

... e uma altura de 0 ...

sem altura também

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

bordas laterais transparentes

Isso resulta em um triângulo.


10
@Jauzsika, você pode adicionar esses triângulos em uma página sem adicionar elementos adicionais simplesmente usando :beforeou :afterpseudo-classes.
precisa saber é o seguinte

stackoverflow.com/questions/5623072/… é o que o Sr. BoltClock está se referindo.
thirtydot

99
Aja com animações: jsfiddle.net/pimvdb/mA4Cu/104 . Apenas para aqueles de nós que precisa de uma prova ainda mais visuais como eu ...
pimvdb

Com um triângulo diferente left-bordere right-bordernão isósceles pode ser feito. E quando muitos triângulos são combinados ... jsfiddle.net/zRNgz
JiminP

2
Em 2018, existe uma maneira melhor de fazer um triângulo com CSS em vez de usar esse hack?
Scribblemacher

518

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

Exemplo de fronteira

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.


487

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 :

quadrado com quatro bordas

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 :

metade inferior do quadrado com quatro bordas

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 :

borda inferior triangular


21
Legal, mas não é o mesmo ? :-)
Stanislav Shabalin

5
There's another way to draw .., que acaba sendo da mesma maneira :) Porém, uma boa explicação #
Hammad Khan

16
-1 para usar JPEGs com artefatos maciços. Mas +1 por criar um ótimo exemplo de quando não usar JPEGs aos quais posso vincular no futuro para dissuasão. ;)
Henrik Heimbuerger

3
por que um gif não é usado aqui?
Pr7 #

4
Desculpe @hheimbuerger, eu estraguei o seu exemplo, corrigindo as imagens. Você precisará vincular a revisão 2 desta resposta no futuro.
Rory O'Kane

263

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, é:

animação gif: como fazer um triângulo com transformar rotação

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.

Criando um triângulo CSS com o transform roate passo 1

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

Criando um triângulo com CSS3, etapa 2

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

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

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.

16
Provavelmente vale a pena mencionar que o 1,41 é uma aproximação de √2 e o comprimento da hipotenusa do triângulo que você cria, e é por isso que você precisa (pelo menos) dessa largura.
KRyan

Eu queria manter a resposta simples, mas você está certo, deve ser mencionado @KRyan
web-tiki

Na verdade, ao tentar usar isso, skewXseria útil mencionar como as diferentes larguras para uso foram usadas .
KRyan #

1
Esse método funciona melhor quando você precisa de uma borda sólida de 1px para o triângulo.
Roman Losev

Isto é para o caso de você querer criar bordas para triângulo, eu estava preso com a forma como as molduras quando eu quero criar esta caixa de anotação AnnotationBox
vanduc1102

182

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

Gif animado de Triângulo


Versão aleatória


Versão de uma só vez


49

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:

insira a descrição da imagem aqui

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.

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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.

insira a descrição da imagem aqui

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.

insira a descrição da imagem aqui

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


3
Por que você usou um Portal Nether na primeira etapa?
LuizLoyola 02/07/19


32

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:

Saída em triângulo pequeno

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.

Triângulo grande

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

Triângulo em ângulo reto


29

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>


1
como isso não é cross-browser? triângulos devem voltar ao IE6.
Chriscauley

4
o uso de: before e: after não é 100% suportado.
PseudoNinja

2
Elementos de psuedo não são suportados <IE8.
Alex

19

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:

insira a descrição da imagem aqui


18

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


Esta é uma solução bonita, mas deve-se notar que é apenas o IE 10+.
Eric Hu

13

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


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.


11

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:

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>

Passo 2

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

insira a descrição da imagem aqui

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


9

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 .


8

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:

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.

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.

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

Triângulo CSS com gradiente

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:

Outra maneira é controlar a altura da div e manter a sintaxe do gradiente fácil:

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

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

Triângulo CSS com gradiente

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:

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:

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


4

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/


4

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

2

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>


1

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>


0

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>

Criar triângulos CSS usando gradiente cônico

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.