[Solved] Little white triangle on images

[TheN00b]

Hello Friends

Can someone please tell me what the easiest way is to achieve something like the following with CSS?

I know I can create the white triangle in Photoshop, save it as an image and position it absolutely via CSS, but surely there is an easier way now?

Any help would be greatly appreciated.

Thank You.

PS. What is the technical name for that small white triangle?

[Paulie_D]

A name….arrow, pointer…there’s no technical name that I can think of.

As for how it’s made, there’s a few ways of doing it but this might help you out.

https://css-tricks.com/snippets/css/css-triangle/

[Paulie_D]

An image is probably the last option I would use as it’s too inflexible in terms of color change and sizing.

Font-icon would be OK but it seems a little like using a sledgehammer to crack a nut…it also has some issues in terms of sizing.

I previously would have said that pure CSS would be the way to go as its fully flexible but I’m more and more drawn to the possibilities of re-usable SVG elements like Chris used for the CSS tricks menu.

[dyr]

I’d just use a pseudo element. Note you cannot apply a pseudo element to an <img /> directly so you must use a wrapping element such as <figure> which is a semantic use so no worries there. Figure is a block level element so make sure to set it to float: left or set a specific width that matches the image inside so that your psuedo element is positioned properly.

http://codepen.io/shawkdsn/pen/xBHpE

[Paulie_D]

I generally use display:inline-block with <figure> and set the image to ‘display:block`.

Works fine most of the time.

[TheN00b]

Thank You Guys. Dyr’s solution was what I wanted. Thanks ^_^

[TheN00b]

How do I mark Thread/Topic as Solved?

Thanks

[Paulie_D]

S’OK…I’ll do that for you. :)

[Author]

Posts