1

I can use the css triangle technique to add a point to one side of an object, and this works great with one item in isolation.

But I am looking to apply this to a list of items to show the direction of navigation (like so http://jsfiddle.net/jZcZK/2/).

What I want is replace the solid triangle arrow head with and linear arrow (like this >) - so just the right hand edge is showing.

Who's got a clever solution?!

Improve this question

2 Answers 2

Reset to default
7

does it work for you? http://jsfiddle.net/kuyabiye/SJ9EK/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That's a great idea and would work well in a lot of scenarios. But I'm looking for something that's flexible enough for the item backgrounds to be css gradients.
I'm going with this as it's the cleanest solution - I'll just have to wait for browsers to support border-image gradients for it to work 100% how I'd like - but this is definately the way it should be done! jsfiddle.net/SJ9EK/9
Great on that, @Colin. One caveat: Not all browsers will support the :before and :after psdueo's. You need to test it on all the browsers that your user is likely to use.
Yep I'm aware of that thanks. I'm happy for users on less advanced browsers to lose these features.
0

The triangle is essentially a very thick border on only one side.

Put another "triangle" with the same color as your grey background on top of the original triangle, positioned just 1px to the left. This should cover up your triangle leaving only a thin border.

Improve this answer

12 Comments

This is the same as Berkin Berkcan Çırak's answer above isn't it?!
Yes. He also gave an implementation, so pick his as the right answer.
Haha. I commented on why this doesn't work for me - although would be a great solution for a lot of people. I need something that is really 1px rather that the illusion of 1px.
Not without using a bitmap if you want it to work on all browsers (including IE). For modern browsers, you can always use CSS transform to rotate a div by 45 degrees and have only a 1px border on the right/bottom sides. This is how most JavaScript toolkits render the angled button style of iPhone.
And also, I don't understand. The border can be made exactly 1 px wide -- it is not an illusion -- via positioning. Is there any particular reason why @Berkin's solution doesn't work for you?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.