Use links in geometric shapes

Question

I have the following code:

.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>

I have a menu where each item will be of a different geometric shape, this is in the li’s.

I want the text "Link" to stay exactly inside the trapeze, which I can do?

Answer 1

Use the Randrade proposal or change its implementation.

There is no way to center the link without the position is absolute because its element has no height defined, you have chosen to do the visual part with edges and there are problems of this approach. Try to answer: How to vertically center a text on a height-free element?

I would still bet on SVG. Create the link with the tag <text> and group the elements (geometric figure and link) with the 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='/'>
      <text x="70" y="30">StackOverflow</text>
    </a>
  </g>
  
</svg>

Answer 2

You can put the class trapézioInvertido 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 defining the position as absolute and his position.

Edit

To add to a list, you should add position: relative in the list and change the position of each <a href="#">, in this way:

.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 the positions, see this response.