CSS triangle for image tag

Question

I'm searching for a way to add a border triangle (with transparent tips) with an img html tag. It's work with a div but not with an image tag.

http://jsfiddle.net/hyH48/2131/

.mybox {
    width:200px;   
    height:100px;
    position:relative;
    border: 5px solid red;
}

.mybox:after, .mybox:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.mybox:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: red;
    border-width: 30px;
    margin-left: -30px;
}
.mybox:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: red;
    border-width: 36px;
    margin-left: -36px;
}

Try setting the `` tag as `display:block;`. And tell me how it goes. — SrAxi, Jul 08 '14 at 14:26
http://jsfiddle.net/hyH48/2132/ It worked for me, only in Firefox tho. — SrAxi, Jul 08 '14 at 14:29
you'll need jquery http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements?lq=1 — valerio0999, Jul 08 '14 at 14:31
ok, try adapting the CSS to other browsers from the solution I gave you. Or pick another solution more Global. (second options is better). Good luck friend! ;) — SrAxi, Jul 08 '14 at 14:31

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

You can't use pseudo elements with the image tag check here

You will have to wrap your image with for example a div element and set the pseudo elements on that element.

edited May 23 '17 at 10:32

Community

1
1

answered Jul 08 '14 at 14:27

web-tiki

99,765
32
217
249

I can't wrap the image. The image is a marker on a map, the map API only accept image for markers and no HTML. – Ludovic Jul 08 '14 at 14:29
@Ludovic You could try using jQuery to wrap the image in a div tag if you realy can't change the HTML – web-tiki Jul 08 '14 at 14:36
1

Seems to me you need a new image...that's all. – Paulie_D Jul 08 '14 at 14:38
@Ludovic I think Paulie_D is right, simplest solution would be to implement your triangle directly in your image – web-tiki Jul 08 '14 at 14:39
Yes I'm agree I need an image but images are dynamically send to the map (it's user avatar). I'll ask the designer to change his design :) – Ludovic Jul 08 '14 at 14:50

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

Please check this answer: click here

Most browsers do not support using :after or :before on img tags.

edited May 23 '17 at 12:18

Community

1
1

answered Jul 08 '14 at 14:31

Amit Prajapati

1,190
2
9
13

CSS triangle for image tag

2 Answers2