Creating rectangular DIVs with arrows

Question

I'm just starting to get more into CSS, and initial experiments have been really good! I'm finding my feed with popup boxes and CSS styling etc! However, I want to push the boundaries of what I know a bit ...

I'm trying to achieve a styled DIV (no problems there) that is rectangular, but has an arrow pointing to an icon on the nav bar, see image below, that includes the box border, and where the DIV itself can vary in height (although the arrow stays the same height/width at all times).

Can anyone point me in the right direction - or am I trying to do more than is possible!?

Thanks, in advance.

Answer 1

vimeo.com actually do that with pure CSS, except their arrows point downwards. A good way to learn new CSS is to use Firefox+Firebug or just Chrome and learn how to "borrow" CSS from other sites.

I borrowed their downward pointing arrows once, and it worked just great.

Answer 2

For widespread browser support, you should do that with background images. There are several resources and tutorials you can check out. I advise you on this book:

• Pro CSS and HTML Design Patterns - Excellent book which has a section on styling divs with bg images (code here - this example is for rounded corners, which you can now achieve with good support using CSS3 tags, but gives you an understanding of how to achieve any border effect you want)

And of course, if you google around for background image div styling you will find many examples on how to achieve that type of effect.