You can put the trapézioInvertido
class in a div
, and call your list within it.
.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>
I created the class lista
by setting the position to absolute
and its position.
Edit
To add to a list, you must add position: relative
to the list and change the position of each <a href="#">
, like this:
.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>
To better understand positions
, see this answer.