Question

I've been trying to get a div with a CSS shape to function as a link.

I can get the div with the shape to show up, the link tag also is rendered, but I can't actually get the link tag to fill up the div so to say.

Is there anything I'm missing?

JSFiddle: CSS Shape Link

HTML code:

<div style="width: 0px; 
height: 0px; 
border-left: 7px solid transparent; 
border-right: 7px solid transparent; 
border-top: 12px solid #d1e8ff;
display: inline-block;
vertical-align: middle;">
   <a href=\"{0}\" style=\"display:block; height:13px; width:12px; align:\"></a>  
</div>

Did the styles inline so that you don't have to read the classses separately.

Was it helpful?

Solution 2

Do it the other way round, the anchor needs to wrap the div: http://jsfiddle.net/H2J9a/2/

Also, you don't need to escape the quotes.

In your case, the borders are pushing the anchor below the div, so you can either try making the anchor absolutely positioned so it floats above the div, or put the shape styles on the anchor itself. See it here: http://jsfiddle.net/H2J9a/6/.

This is an example of the anchor having the shape styles (the div is unnecessary here, although I kept it):

<div style="">
    <a href="{0}" style="width: 0px; 
                         height: 0px; 
                         border-left: 7px solid transparent; 
                         border-right: 7px solid transparent;
                         border-top: 12px solid #d1e8ff;
                         display: inline-block;
                         vertical-align: middle;">
    </a>  
</div>

OTHER TIPS

Why not just use the anchor without the div

http://jsfiddle.net/H2J9a/5/

<a href="#" style="width: 0px; 
    height: 0px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 12px solid #d1e8ff;
    display: inline-block;
    vertical-align: middle;">
</a>

You don't need a div at all

JsFiddle

CSS

a {
    display:block; 
    height:0px; 
    width:0px;
    border: 7px solid transparent; 
    border-top: 7px solid #d1e8ff;
}

You can try wrapping the div with <a></a> instead of other way around.

Here is a fiddle

<a href="www.google.com" style="display:block; height:13px; width:12px; align:"><div style="width: 0px; 
    height: 0px; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 12px solid #d1e8ff;
    display: inline-block;
    vertical-align: middle;">
</div>

   </a> 
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top