3

Estou tentando criar um efeito de div triangular para ficar abaixo de uma div normal como na imagem abaixo.inserir a descrição da imagem aqui.

O problema é que não estou conseguindo colocar os valores de border-left: e border-right: dinamicamente para encaixar na div.

Alguma idéia de como fazer?

Segue o código:

.normal{
  height:100px;
  background-color:#f00;
}
.triangulo {
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent;
  border-top: 20px solid #f00;
}
<div class="normal"></div>
<div class="triangulo"></div>

3 Respostas 3

3

Um das soluções para resolver isso é usando skewY(), o problema de fazer como vc está fazendo é que vc não vai conseguir fazer o background passar de um elemento para o outro mantendo a continuidade de imagem entende. No seu caso vc teria que ter um backgrund-imagem em cada elemento e dificilmente eles ficariam alinhados.

OBS: Eu utilizei transform:skew pq ele tem um suporte melhor dos browser, funciona a partir do IE9, mas vc tb poderia fazer isso com clip-path (não funciona no IE ou Edge), SVG (muito código para pouca coisa), e até com linear-gradiente daria pra fazer, mas preferi com transform mesmo

A minha solução é usando pseudo-elementos after e before e inclinando ele com skew. Veja como fica no exemplo

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.efeito {
  position: relative;
  height: 200px;
  background-image: url(https://unsplash.it/420/200);
  background-size: cover;
  color: #f00;
}
.efeito::before, .efeito::after {
  content: "";
  position: absolute;
  background-color: #fff;
  bottom: 0;
  height: 5vw;
  width: 50%;
}
.efeito::before {
  left: 0;
  transform: skewY(5deg);
  transform-origin: bottom left;
}
.efeito::after {
  right: 0;
  transform: skewY(-5deg);
  transform-origin: bottom right;
}
<div class="efeito">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed voluptate dignissimos odit quod velit, natus vero ut ratione libero nulla!
</div>

4
  • Show de bola Hugo, gostei do exemplo :) 11/10/2018 às 11:23
  • 1
    @JoãoPedroSchmitz a sua explicação ficou muito boa tb, eu sempre acho confuso fazer triângulos com bordas :D. A vantagem desse método é com relação ao bg-imagem, mas no caso de uma cor sólida no fundo a gambeta das bordas funciona tranquilamente
    – hugocsl
    11/10/2018 às 11:26
  • 1
    Valeeu! Isso mesmo, o problema do border é o background image mesmo! 11/10/2018 às 11:28
  • Valeeeu, ajudou muito! 11/10/2018 às 11:34
3

Vamos lá, para isso você pode usar as propriedades border-left-width e border-right-width.

Veja um exemplo parecido que você deseja:

.triangle {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-left-width: 230px;
  border-right-width: 242px;
  border-top: 39px solid black;
}
<div class="triangle"></div>

Agora precisamos entender o que está acontecendo com a div e como funciona a propriedade.

O border-left-width e border-right-width são iguais, só muda o lado que você define o tamanho. Veja um pequeno exemplo de como eles funcionam:

.show-example {
  /* Auxiliar */
  background-color: black;
  width: 20rem;
  height: 5rem;
  border: 0 solid #dc143c;
  /* O que interessa */
  border-right-width: 2em;
  border-left-width: 2em;
}
<div class="show-example"></div>

As propriedades setam o valor da largura lateral, e funcionam em parceria com a border-top, que definirá a altura da div. Lembre-se também que os valores da largura lateral devem ser proporcionais, já a altura é relativa ao tamanho do seu triângulo.

Observação: o suporte para o triângulo feito com CSS é práticamente global, visto que usamos tags já bem conhecidas e que possuem suporte em praticamente todos os navegadores, até no IE, da versão 4 em diante.

1
  • 1
    Muito obrigado pela sua resposta João, fez entender melhor essa confusão de fazer triangulos com css 11/10/2018 às 11:34
2

Vou deixar também uma resposta na minha própria pergunta sobre uma outra solução que achei em SCSS.

Segue:

SCSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.efeito {
  background: #f00;
  width: 100%;
  position: absolute;  

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    right: 0;
    padding-bottom: 10%;
    background: #f00;
    clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
  }
}

HTML:

<div class="efeito">
   Teste
</div>

Resultado: JSFiddle

1
  • Clip-path é uma ótima opção, até citei na minha resposta, o problema fica por conta do suporte dos browsers mesmo, infelizmente não tem suporte no IE ou Edge, mas vale o exemplo pra comunidade! Vai que o Edge resolve aceitar nos próximos meses ou anos rss
    – hugocsl
    11/10/2018 às 11:33

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 .