'CSS shape' with image overlay

Question

I have a triangle:

#tri{
width: 0;
height: 0;
float: right;
border-top: 25px solid red;
border-left: 25px solid transparent;
}

I want the whole triangle area to be a link, so I did:

<a href="...">
    <div id="tri">
    </div>
</a>

And I also want the area to "cut" a background image, so that rather than red, it's a triangular portion of an image.

I tried numerous things, but to be honest, I was just guessing - adding it to #tri as a background image, adding img to the div element, as you already know these didn't work.

I assume it's possible, but I haven't been able to find an example, tutorial, or similar demo.

Can anyone lend me a hand?

http://jsfiddle.net/XSgwv/

So do I, but I created one, link in post. (literal copy of code in post..) — OJFord, Jul 07 '13 at 15:19
Possible duplicate? http://stackoverflow.com/questions/10969941/css3-triangle-shape-with-background-image — leoMestizo, Jul 07 '13 at 15:30

score 2 · Accepted Answer · 2013-07-07T15:37:58.473

2

I would suggest creating an image of the triangle and inserting it like this:

<a href="...">
<img class="tri" src="some.jpg" alt="red triangle" >
</a>

You can create various classes to change the way the triangle is viewed.

so:

OR

<a href="...">
<img class="tri"   alt="red triangle"/>
</a>


.tri{
width: 0;
height: 0;
float: right;
border-top: 25px solid red;
border-left: 25px solid transparent;
}

Please see: http://jsfiddle.net/yvytty/bwQJC/2/

I prefer to use classes than id's, just makes it easier when also using javascript and getting elementsById, just a habit I am in.

edited Jul 07 '13 at 15:37

answered Jul 07 '13 at 15:24

Thanks, don't know why I didn't just cut the image to begin with! – OJFord Jul 07 '13 at 15:47
2

some code snippets : http://codepen.io/gcyrillus/pen/foGus http://codepen.io/gcyrillus/pen/dakFi – G-Cyrillus Jul 07 '13 at 17:20

score 1 · Answer 2 · answered Jul 07 '13 at 15:20

1

you can use the HTML element is used with elements to define a image map.

<map name=a>
  <area shape=rect coords=25,25,75,75 href=#fail href="http://www.example.com">
</map>
<img usemap=#a src=image.png>

change the co-ordinates with your triangle coordinates ..

answered Jul 07 '13 at 15:20

Naresh

2,761
10
45
78

I can't use co-ordinates. It occurs multiple times in varying positions, depending on the size of other elements. – OJFord Jul 07 '13 at 15:22

'CSS shape' with image overlay

2 Answers2