Down facing triangle… but wait… what is this… with borders?

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.

Answer 2

with 'little' change you can achieve this, i'm not sure it is the best way but it sure works.

the idea is to have a second 'slightly larger' triangle positioned behind the orange one.

try a working example @ jsfiddle http://jsfiddle.net/saelfaer/e4ahw/

after putting the two triangles on top of each other, i move them up 2 pixels top: -2px so they lay on top of the orange box, and thus conceil the black border that runs around the div you want to have an arrow on :)

Answer 3

I actually don't know if this will work on IE7...

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid #000;
}
.arrow-down:before {
        content: '';
        position:absolute;
        top: -22px;
        left: -20px;
        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;
}

my hacky solution See Here

Answer 4

Try this: http://jsfiddle.net/rSzds/1/

CSS:

.arrow-down-border {
        width:0;
        height:0;
        position:relative;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid black;

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

HTML:

<div class="arrow-down-border">
    <div class="arrow-down">
    </div>
</div>

I haven't tested it in IE7.

Answer 5

I would create a .arrow-down-border class, with black color, and a second triangular div.

fiddle

Answer 6

&#9660 ▼

&#9661 ▽

&#9662 ▾

&#9663 ▿

&#9947 ⛛

&#9207 ⏷