Aligning css arrow boxes

Question

My question is similar to this question: Arrow Box with CSS But instead of only 1 box I need to align several boxes. And still be able to see the arrow on all boxes.

In this example: http://jsfiddle.net/casperskovgaard/LHHzt/1/ I have created two arrow boxes that float to the left. The problem is that the arrow on the first box is not visible.

How do I make the arrow visible?

HTML:

<div class="arrow"></div>
<div class="arrow"></div>

CSS:

.arrow {
    float: left;
    width: 128px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #999;
    position: relative;
}
.arrow:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 128px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #f0f0f0;
}
.arrow:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 129px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #999;
}

EDIT:

The first arrow must overlap the box to the right. See solution from artSx: http://jsfiddle.net/LHHzt/6/ Only thing missing from this solution is that it should be possible to add several (more than two) boxes

Please check my answer, I think my fiddle shows what you are after — Pete, Jun 29 '13 at 09:52

score 1 · Answer 1 · answered Jun 28 '13 at 13:53

1

add this :

.arrow:first-child{
 z-index:10;   
}

JsFiddle with correction

answered Jun 28 '13 at 13:53

artSx

1,560
1
12
19

This is the way it should look. But I also need to be able to add more boxes. If I add more boxes only the first and the last arrow is visible. – Casper Skovgaard Jun 28 '13 at 14:07
1

you can select arrow if you want => .arrow:nth-child(1) / .arrow:nth-child(2) etc.. – artSx Jun 28 '13 at 14:09

score 1 · Answer 2 · answered Jun 28 '13 at 13:53

1

Just add a z-indexto your .arrow:before. Here is the live version http://jsfiddle.net/LHHzt/13/

.arrow:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 129px;
    width: 0;
    height: 0;
    z-index:2;
    border: 50px solid transparent;
    border-left: 12px solid #999;
}

Works with as many box as you want :)

answered Jun 28 '13 at 13:53

Xavier

3,919
3
27
55

This is close to what I need. But this way the arrows change color. They need to stay the same color as the box. Only the border should be dark grey. – Casper Skovgaard Jun 28 '13 at 14:04
1

@CasperSkovgaard : Plz check this out http://jsfiddle.net/LHHzt/17/, i seems to be ok. Just add a z-index:2 to `.arrow:after` and it works :) – Xavier Jun 29 '13 at 15:15

score 1 · Accepted Answer · answered Jun 28 '13 at 14:18

if you change the z-index of the after psudeo element to 2 and then the before element to 1 then it should work as you intend:

.arrow {
    float: left;
    width: 128px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #999;
    position: relative;
    margin-right:15px;
}
.arrow:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 128px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #f0f0f0;
}
.arrow:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 129px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #999;
}

http://jsfiddle.net/peteng/LHHzt/15/

score 0 · Answer 4 · answered Jun 28 '13 at 13:53

try this

http://jsfiddle.net/casperskovgaard/LHHzt/1/

.arrow {
    width: 128px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #999;
    position: relative;
}
.arrow:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 128px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #f0f0f0;
}
.arrow:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 129px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 12px solid #999;
}

Not sure if you posted the right code. But the boxes need to be beside each other. — Casper Skovgaard, Jun 28 '13 at 14:09

score 0 · Answer 5 · answered Jun 28 '13 at 13:54

Just add a margin to the arrow...

.arrow {
    float: left;
    width: 128px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #999;
    position: relative;
    margin-right: 15px;
}

http://jsfiddle.net/LHHzt/11/

Or change z-index to display above if you want them to overlay

score 0 · Answer 6 · answered Jun 28 '13 at 13:55

0

Just adding a margin to the arrow resolves the problem.

See this JSFiddle : http://jsfiddle.net/LHHzt/9/

I just added a

margin-right: 15px;

answered Jun 28 '13 at 13:55

Jerska

11,722
4
35
54

Aligning css arrow boxes

6 Answers6

Linked

Related