Different ways to show photo being selected with tag

Question

I am trying to do a UI that show a photo (or box) being selected and tagged. For example:

http://behance.vo.llnwd.net/profiles/59549/projects/3012199/8c0a114a08fa35bfbb0e6bc32936a525.jpg

Original Url: http://www.webdesignserved.com/gallery/Canal-180/3012199

As you seem, the photos there were selected in green border with the triangle on top right. Here is the problem:

1. I want to show something in the triangle that is dynamic. Basically, I want to show numbers in that little triangle.

2. If the number is 0-9, it's OK. But if it goes larger to 2 digits such as 55, it doesn't fit the triangle.

3. I don't want to make smaller font for 2 digits number

I could make the triangle to be square or rectangle. But that kind of UI seems "weird". Is there any good suggestion? What have you seen in other websites?

Thanks.

Answer 1

A fairly simple solution would be to create an image div, a border div, and the dynamic content. Here is an example: JSFIDDLE

This method also allows you to see the square corner tag. I think you're right, a triangle would be a more finished look over the square. Circles look too much like the typical screw, which works in some UI designs, but might not be a winner here.

To give this a triangle look, create a border vector image, or something web friendly, and make the background transparent. Place an IMG tag in the "border" div and line it up with CSS. remove the padding from the "dynamicContent". Then, you're golden.

I hope this helps!

Answer 2

For "technical counters" I sometimes add the "0" to one digit numbers (01, 02, …) – but I suppose you don't want to use two digit numbers by default ?