Criando triângulos com CSS

24 de Agosto de 2013

Leia em 1 minuto

Você sabia que é possível desenhar triângulos apenas com CSS? Eu sabia, mas nunca tinha parado para entender como isso funcionava. Na verdade, o conceito todo é muito simples.

No CSS, bordas são renderizadas através de ângulos de 45º.

Renderização de bordas

Se você definir as bordas como transparente, pode manipular o formato do objeto.

Renderização de bordas com um dos lados transparente

Agora, para criar triângulos, devemos definir a dimensão do elemento como zero. Assim, as bordas terão a aparência de um triângulo. O que irá definir a dimensão deste triângulo será a espessura da borda.

Borda definida em um elemento sem dimensões

div {
  width: 0;
  height: 0;
  border: 50px solid;
  border-color: red blue yellow green;
}

Com isso é possível fazer apenas com CSS o que antes precisava de imagens, como tooltips e banners.

Fazendo um tooltip

Para fazer um tooltip, você pode usar um pseudo-elemento para definir a seta. Assim você não precisa definir elementos que apenas serão usados no CSS.

<p class="tooltip">
  Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas.
</p>

Para definir um triângulo apontando para a esquerda, basta definir apenas a cor da borda direita. Lembre-se de definir o posicionamento sempre em dobro, já que a borda esquerda existe e é transparente.

body {
  font-family: sans-serif;
  padding: 50px;
}

.tooltip {
  background: #bf3605;
  color: #fff;
  padding: 15px;
  position: relative;
  width: 200px;
}

.tooltip:before {
  border: 10px solid transparent;
  border-right-color: #bf3605;
  content: "";
  left: -20px;
  position: absolute;
}

O resultado? Um simpático tooltip.

Tooltip com CSS

Criando banners

Você também pode criar banners.

<div class="box">
  <h1>Some page</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Neque tempora fugiat debitis. Optio voluptate amet tenetur
    ipsam harum earum assumenda architecto excepturi eaque nostrum
    totam magnam qui provident vel officiis.
  </p>
</div>

body {
  background: #aaa;
  font-family: sans-serif;
  zoom: 1;
  padding: 50px;
}

.box {
  background: #fff;
  width: 350px;
  margin: 0 auto;
  position: relative;
  padding: 50px 25px 25px 25px;
}

.box h1 {
  background: #222;
  color: #fff;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
  position: absolute;
  left: -15px;
  right: -15px;
  top: 15px;
}

.box h1:after,
.box h1:before {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 100%;

  border-style: solid;
  border-color: transparent;
}

.box h1:before {
  left: 0;
  border-width: 0 15px 5px 0;
  border-right-color: #444;
}

.box h1:after {
  border-width: 5px 15px 0 0;
  border-top-color: #444;
  right: 0;
}

Finalizando

Uma vez que você entende os conceitos de como as bordas são renderizadas, a coisa toda fica muito mais simples. E as possibilidades são infinitas!