Use links in geometric shapes

Question

Use links in geometric shapes

Navigation

#1 by (6 votes)
#2 by (5 votes)

2

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 be exactly inside the trapeze, what can I do?

html css css3

asked by anonymous 24.11.2015 / 18:33

2 answers

How to insert multiple values into an array? Treat return in class in C #

score 6 · Answer 1

Use the Randrade proposal or change its implementation.

You can not centralize the link without the position being absolute because your element has no height defined, you have chosen to do the visual part with borders and you are there of the problems of that approach. Try to answer: How to vertically center a text in an element without height?

I would still bet on SVG. It would link to <text> and group the elements (the geometric figure and the 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='http://pt.stackoverflow.com/'>
      <text x="70" y="30">StackOverflow</text>
    </a>
  </g>
  
</svg>

score 5 · Answer 2

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.