Criando uma fita com CSS

Nenhum produto encontrado nessa seleção.

Criar um efeito de fita com CSS (ou qualquer forma geométrica) se torna algo bastante simples quando você entende como as bordas dos elementos realmente funcionam.

Quando determinado elemento tem apenas bordas (sem altura, nem largura), você terá quatro triângulos formando um quadrado baseando-se na largura das bordas, veja um exemplo abaixo:

 

O exemplo acima tem o código inline mesmo, só para que você compreenda o que acontece aqui:

<div style="line-height: 0; 
	width: 0px; 
	height: 0px; 
	border-style: solid; 
	border-width: 100px; 
	border-color: red green blue yellow; 
	overflow: hidden;">
</div>

Se você colocar todas as bordas da mesma cor e configurar qualquer lado com borda transparente, consegue uma forma geométrica (ou no mínimo algo peculiar). Exemplo:

 

Ou:

 

Ou ainda:

 

E assim por diante… Você pode ir brincando com a cor da borda ou com a largura da mesma (se for aplicável), e vai atingir alguns efeitos bem legais.

<div style="line-height: 0; 
	width: 0px; 
	height: 0px; 
	border-style: solid; 
	border-width: 100px; 
	border-color: transparent red transparent transparent; 
	overflow: hidden;">
</div>

Pensando nisso, podemos combinar o efeito obtido acima para criar um efeito de fita utilizando apenas CSS.

Veja abaixo o que vamos fazer:

See the Pen Fita com CSS by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.

Efeito de fita com CSS

Vamos precisar de seis elementos no total para atingir nosso objetivo, porém, ao invés de criarmos todos estes elementos, vamos criar apenas dois:

<div class="fita">
  <div class="conteudo">Texto  da fita</div>
</div>

Então utilizaremos os pseudo-elementos :before:after para conseguir os outros elementos.

Primeiramente vamos configurar nossa fita em si:

.fita{	
	background: #e51c46;
	position: relative;
	margin:20px auto;
	width: 300px;
	color:#fff;
	line-height:40px;
	height:40px;
	font-size: 16px;
	text-align: center;
	font-weight:700;
	text-transform: uppercase;
}

Nada muito diferente aqui, algo que você faria em qualquer elemento sem dificuldades no seu CSS.

Efeito fita 1

Agora vamos configurar o padrão dos pseudo-elementos :before e :after.

Estes vão ser as pontas da fita.

.fita:before, .fita:after{
	content: '';
	line-height:0;
	border-style:solid;
	border-width: 20px;
	position: absolute;
	top:10px;
	z-index: -2000;
	width:5px;
}

A largura da borda é que vai definir a altura do elemento.

Agora precisamos definir a posição e a cor da borda das duas pontas separadamente.

.fita:before{
	border-color: #bc1438 #bc1438 #bc1438 transparent;
	left:-35px;
}
.fita:after{
	border-color: #bc1438 transparent #bc1438 #bc1438;
	right: -35px;
}

E já começamos a ter algo relativamente interessante.

Efeito fita 2

Para dar um toque final, vamos utilizar os pseudo-elementos do conteúdo da fita para criar um efeito 3D na mesma, veja:

.conteudo:before, .conteudo:after{
	position: absolute;
	content: '';
	height: 0;
	line-height:1px;
	border-style:solid;
	border-width:5px;
	z-index:-1999;
}
.conteudo:before{
	border-color: #940d2a #940d2a transparent transparent;
	bottom:-10px;
	left: 0;
}
.conteudo:after{
	border-color: #940d2a transparent transparent #940d2a;
	bottom:-10px;
	right: 0;
}

A tática aqui é a mesma, criamos uma forma geométrica e posicionamos de acordo com o necessário.

Finalmente temos o seguinte:

Efeito fita 3

Um efeito de fita criado com CSS puro.

Em caso de dúvidas, criticas, ou qualquer assunto relacionado, basta comentar.