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
– Pete, Commented Jun 29, 2013 at 9:52

Pete · Accepted Answer · 2013-06-28 14:18:54Z

1

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/

answered Jun 28, 2013 at 14:18

Pete

58.8k31 gold badges132 silver badges187 bronze badges

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

Comments

artSx · Accepted Answer · 2013-06-28 13:53:35Z

1

add this :

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

JsFiddle with correction

answered Jun 28, 2013 at 13:53

artSx

1,6401 gold badge13 silver badges19 bronze badges

2 Comments

Casper Skovgaard Over a year ago

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.

artSx Over a year ago

you can select arrow if you want => .arrow:nth-child(1) / .arrow:nth-child(2) etc..

Xavier · Accepted Answer · 2013-06-28 13:53:47Z

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, 2013 at 13:53

Xavier

4,0173 gold badges30 silver badges58 bronze badges

2 Comments

Casper Skovgaard Over a year ago

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.

Xavier Over a year ago

@CasperSkovgaard : Plz check this out jsfiddle.net/LHHzt/17, i seems to be ok. Just add a z-index:2 to .arrow:after and it works :)

Falguni Panchal · Accepted Answer · 2013-06-28 13:53:00Z

0

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;
}

answered Jun 28, 2013 at 13:53

Falguni Panchal

8,9893 gold badges29 silver badges33 bronze badges

1 Comment

Casper Skovgaard Over a year ago

Not sure if you posted the right code. But the boxes need to be beside each other.

Atrox111 · Accepted Answer · 2013-06-28 13:54:43Z

0

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

answered Jun 28, 2013 at 13:54

Atrox111

5274 silver badges17 bronze badges

Comments

Jerska · Accepted Answer · 2013-06-28 13:55:26Z

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, 2013 at 13:55

Jerska

12.1k4 gold badges38 silver badges54 bronze badges

Collectives™ on Stack Overflow

Aligning css arrow boxes

6 Answers 6

Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related