Take the 2-minute tour ×

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


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?


share|improve this question
Can you provide a little bit more info? Why do you need to select photo's? What purpose do the tags have? What do the numbers do? –  Misha Scholte Jan 16 '13 at 21:42
Why not make it into a circle instead? People are familiar with the 'badge' concept in iPhone. –  Michael Lai Aug 15 '13 at 3:17
add comment

2 Answers

up vote 2 down vote accepted

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!

share|improve this answer
Thanks for the sample code but I was open to any other UI ideas. The rectangle doesn't make it look good though :D –  HP. Jan 16 '13 at 21:20
add comment

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 ?

share|improve this answer
Yah putting 0 in front would make it "ugly". Any other idea on displaying a number tagged to a photo after being selected? –  HP. Jan 16 '13 at 21:21
So what is the number actually going to represent? Does it have to be an exact number? And could it in some cases also even become a three digit number? –  tillinberlin Jan 17 '13 at 10:26
add comment

Your Answer


