25

Os quadrados que apresentam a cor de um item podem ter até duas cores que neste último caso deverão ser apresentadas como se pode ver em baixo:

Exemplo do resultado final

Ambas as cores são aplicadas na propriedade de CSS background.
O que está a ser feito é ter um quadrado para apresentar a cor e nos casos em que existe uma segunda cor é aplicado um novo elemento dentro do quadrado da cor principal.

Problema

O elemento interior, tem naturalmente uma forma quadrada, mas para se chegar ao layout pretendido, o mesmo deveria ficar numa forma triângular.

Exemplo no JSFiddle

HTML

<div class="color">
    <div></div>
</div>

CSS

.color{
    width:40px;
    height:40px;
    background:white;
}
.color > div{
    background:black;
    width:20px;
    height:20px;
}

Pergunta

Como passar um elemento bloco para uma forma triângular via CSS ?

1

4 Respostas 4

27

O truque para se resolver isso é bastante interessante. Ele se baseia no fato de que quando duas bordas de um elemento se encontram, elas formam um ângulo de 45 graus entre si.

Imagine o seu quadrado de 40px sem dimensões (width e height), e com as 4 bordas definidas, todas com a espessura de 20px e cada borda com uma cor diferente. O resultado tem esta aparência:

inserir a descrição da imagem aqui

O exemplo acima foi gerado com o seguinte CSS:

.color > div{
    border-top: 20px solid black;
    border-right: 20px solid blue;
    border-bottom: 20px solid green;
    border-left: 20px solid red;
}

Demo no jsfiddle

No exemplo acima, utilizamos as 4 bordas, cada uma com 20px de espessura. Para conseguir o efeito que você deseja, bastam duas bordas, ambas com a espessura equivalente ao tamanho do lado do seu quadrado (ou seja, 40px):

.color > div{
    border-left: 40px solid transparent;
    border-bottom: 40px solid black;
}

Demo no jsfiddle

Acima usamos as bordas esquerda (transparente) e inferior (preta). Mas é possível obter o mesmo efeito usando a borda direita (preta) e a superior (transparente):

.color > div{
    border-right: 40px solid black;
    border-top: 40px solid transparent;
}

Demo no jsfiddle

Compreendendo esse mecanismo, é possível gerar diversos tipos de triângulo, incluindo os que você pede na pergunta. Para gerar um quadrado com divisão diagonal e duas cores, é possível tanto utilizar o div externo para definir uma das cores, como também colorir as bordas que defini como transparentes nos exemplos.

Mais um exemplo, seu quadrado preto e vermelho:

.color > div{
    border-right: 40px solid red;
    border-top: 40px solid black;
}

Demo no jsfiddle

2
  • +1 já tinha visto vários exemplos online, mas é a primeira vez que entendo 100% como essa técnica funciona de fato!
    – mgibsonbr
    Commented 24/01/2014 às 15:46
  • Show de bola esses efeitos!
    – utluiz
    Commented 24/01/2014 às 17:20
7

É possível fazer isso por exemplo através de bordas transparentes (não sei ao certo se estão disponíveis pré-CSS3):

border-left: 40px solid transparent;
border-right: 0px solid transparent;
border-bottom: 40px solid black;

Exemplo no jsFiddle. Fonte: css-tricks.com

Ou seja, em vez de você atribuir width, height e background, você utiliza border-left e border-right - transparentes, um com zero e o outro com a largura desejada - e border-bottom - com a altura desejada e a cor de fundo.

2
  • 1
    Eu acho que a borda direita, zerada, nem é necessária.
    – bfavaretto
    Commented 24/01/2014 às 17:13
  • @bfavaretto Tem razão. Eu peguei o código do triângulo genérico e adaptei, não olhei o "triangle bottom right". De fato, essa borda está sobrando...
    – mgibsonbr
    Commented 24/01/2014 às 20:33
3

Eu utilizo bastante este método de criar um triângulo com bordas, mas, se eu entendi bem a sua pergunta, e olhando para as imagens que você deu de exemplo, você quer um triângulo que não pode ser feito com bordas, já que é um efeito que vem na diagonal, começando por "top left", certo?

Para este caso, faça da seguinte forma:

background: #000; /* para navegadores sem suporte a gradient */

/* IE9 SVG, precisamos declarar uma class para o elemento e no CSS um "filter: none" */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmYwMDA0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(-45deg, #000 0%, #000 50%, #ff0004 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000), color-stop(50%,#000), color-stop(50%,#ff0004)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #000 0%,#000 50%,#ff0004 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #000 0%,#000 50%,#ff0004 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #000 0%,#000 50%,#ff0004 50%); /* IE10+ */
background: linear-gradient(135deg, #000 0%,#000 50%,#ff0004 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#ff0004',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

Com isso você conseguirá um efeito igual que você solicitou.

3
  • Interessante a idéia, embora dê sim para fazer com bordas, e provavelmente haja menos problemas de compatibilidade. Brinde: um demo da sua solução :) jsfiddle.net/Jfwbr
    – bfavaretto
    Commented 28/01/2014 às 19:15
  • Me dê um exemplo com bordas para a imagem na diagonal? Commented 28/01/2014 às 19:38
  • Na minha resposta tem vários
    – bfavaretto
    Commented 28/01/2014 às 19:41
3

Como não foi citado vou dar uma solução usando o pseudo-elemento ::after

Com ele vc cria um elemento dentro da div a partir do CSS, usa transform para rotacionar 45 graus e posiciona com transform-origin

Veja o resultado no exemplo

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: black;
}
.wrapper::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background-color: red;
    transform: rotate(45deg);
    transform-origin: left top;
}
<div class="wrapper"></div>


Segunda opção usando clip-path veja suporte dos browsers https://caniuse.com/#feat=css-clip-path (aparentemente não funciona no IE)

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: red;
}
.tri {
    height: 100%;
    width: 100%;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    background-color: black;
}
<div class="wrapper">
    <div class="tri"></div>
</div>

Documentação oficial W3C do clip-phat https://www.w3.org/TR/css-masking-1/#the-clip-path

OBS: Outra solução ainda seria usando SVG: https://www.w3.org/TR/SVG11/

3
  • 1
    E nem no Edge :/ - mas no futuro com certeza vai ser uma mão na roda :)
    – Syzoth
    Commented 10/04/2018 às 19:05
  • @GuilhermeNascimento Clip-path eh legal de mais, mas atualmente estou viajando eh no SVG, cara svg eh o futuro rss
    – hugocsl
    Commented 10/04/2018 às 19:19
  • Uso SVG pra tudo, dou até preferencia ao SVG para icones, ao invés de fontes.
    – Syzoth
    Commented 10/04/2018 às 19:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .