Question

I’m using the cool CSS here:

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

I’m creating a simple triangle for something I’ll be perfecting with some jQuery. Problem is, I need the triangle to have borders for two of its sides. Seeing as the triangle is made out of borders, this is giving me a headache.

Take a look at this picture here:

I need sides A and B to have a border so they don’t mix with the other orange.

Here is a peak at the css for the triangle itself:

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}

So, I’m open to alternate solutions (uncommon right?). I would prefer a solution with my current setup just because I’ve already put a lot of work into it. Either way though, I need this to have a border (I guess you could call me ‘desperate’).

Cheers and thanks a plenty for any help!

Answer 1

This is more of conceptual idea, than a hard answer (I’m really not as good as you with CSS). But I’ve seen people do drop shadows by just placing an identical item in the same position as the top item, but offset by one or more pixels, and with a smaller z-index.

Perhaps you could do something like that in this case: make a second triangle, color it black, and position it one pixel lower (top:31px) than your main, red triangle. I think since it would be underneath the red triangle, it would also hide the top border, which is part of your requirements.