2

Tenho o seguinte código:

.menu .trapezioinvertido{
	float:left;
	border-top: 70px solid #c1c1c1;
	border-left: 30px solid transparent;
	border-right: 15px solid transparent;
	height: 0;
	width: 120px;
	color:#000;
	text-align: center;
	line-height:0px;
list-style-type:none;

}
<ul class="menu">
	<li><a class="trapezioinvertido" href="#">Link</a></li>
</ul>

Tenho um menu em que cada item será de uma diferente forma geométrica, este está nos li's.

Quero que o texto "Link" fique exatamente dentro do trapézio, o que posso fazer?

6
  • Você quer que o trapézio todo fique com o href, ou apenas o Link?
    – Randrade
    24/11/2015 às 17:37
  • Tanto faz. Se não for mais difícil prefiro que o Link apenas fique com o href.
    – Tiago P.C
    24/11/2015 às 17:37
  • Alguém pode responder?
    – Tiago P.C
    24/11/2015 às 18:38
  • O Complicado é que seu elemento não tem altura (height:0), então vai ter que usar posição absoluta como o Randrade sugeriu. 24/11/2015 às 18:41
  • Mesmo que eu atribua um height o texto não alinha no centro pois a forma é feita com border. Tem alguma solução?
    – Tiago P.C
    24/11/2015 às 18:44

2 Respostas 2

6

Use a proposta do Randrade ou mude sua implementação.

Não tem como centralizar o link sem que a posição seja absoluta pois seu elemento não possui altura definida, você optou por fazer a parte visual com bordas e está aí dos problemas dessa abordagem. Tente responder: Como centralizar verticalmente um texto em um elemento sem altura?

Eu ainda apostaria no SVG. Criaria o link com a tag <text> e agruparia os elementos (a figura geométrica e o link) com a tag <g>:

svg { fill: #1dd2af }
svg text { fill: #fff }
svg text:hover { fill: #333 }
<svg width='200' height='100'>
  
  <g id='figura-com-texto'>
    <polygon points='100,50 0,0 200,0 150,150' />
    <a xlink:href='http://pt.stackoverflow.com/'>
      <text x="70" y="30">StackOverflow</text>
    </a>
  </g>
  
</svg>

3
  • 2
    +1 pelo uso de svg. Eu também optaria em ir por esse caminho.
    – Randrade
    24/11/2015 às 19:24
  • Eu também optaria
    – David
    25/11/2015 às 11:03
  • 1
    Leve, com suporte a animação e com controle total svg +1. 16/11/2017 às 16:28
5

Você pode colocar a classe trapézioInvertido em uma div, e chamar sua lista dentro da mesma.

.trapezioinvertido{
	float:left;
	border-top: 70px solid #c1c1c1;
	border-left: 30px solid transparent;
	border-right: 15px solid transparent;
	height: 0;
	width: 120px;
	color:#000;
    line-height:0px; /* Remover esta linha caso quera mais de 1 item na lista ou aumentar o line-height*/
list-style-type:none;

}

.lista{
    position: absolute;   
    top:2%;
}
<div class="trapezioinvertido">
    <ul class="lista">
        <li><a href="#">Link</a></li> 
        <!--<li><a href="#">Link1</a></li> -->
    </ul>
</div>

Criei a classe lista definindo a posição como absolute e a posição dele.

Edit

Para adicionar em uma lista, você deve adicionar position: relative na lista e alterar a posição de cada <a href="#">, desta forma:

.trapezioinvertido{
    padding: 10px;
	border-top: 70px solid #c1c1c1;
	border-left: 30px solid transparent;
	border-right: 15px solid transparent;
	height: 0;
	width: 120px;
	color:#000;
	text-align: center;
	line-height:0px;
    list-style-type:none;
    position: relative;
}

li a.link{
    position: absolute;
    bottom: 60px;
    left: 50px;
}
<ul>
	<li class="trapezioinvertido" ><a href="#" class="link">Link</a></li>
    <li class="trapezioinvertido" ><a href="#" class="link">Link2</a></li>
    <li class="trapezioinvertido" ><a href="#" class="link">Link3</a></li>
</ul>

Para entender melhor as positions, veja esta resposta.

6
  • Isto nao vai me atrapalhar de nenhuma forma no decorrer do código e da página? Me refiro ao position absolute e fazer um menu com divs ao invés de li's e a's como de costume. Pois vou ter outros itens no menu que irão ter outras formas, não é apenas esta.
    – Tiago P.C
    24/11/2015 às 17:57
  • 1
    @TiagoP.C Você não explicou para o que seria o menu. Se cada li for uma forma geométrica, essa não é a melhor abordagem, e caso for isso, edite sua pergunta com essas informações, que elaboro uma resposta mais adequada.
    – Randrade
    24/11/2015 às 17:59
  • Editei a pergunta @Randrade
    – Tiago P.C
    24/11/2015 às 18:01
  • @TiagoP.C Veja se essa edição lhe atende.
    – Randrade
    24/11/2015 às 18:47
  • 1
    @TiagoP.C Edite sua pergunta e coloque todas as informações necessárias que você precisa, para que eu possa lhe ajudar.
    – Randrade
    24/11/2015 às 18:56

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 .