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.
href
, ou apenas o Link?height:0
), então vai ter que usar posição absoluta como o Randrade sugeriu.