CODEWITHSUNDEEP
csscss-shapes
Casper Skovgaard
Casper Skovgaard

Reputation: 426

Aligning css arrow boxes

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

Upvotes: 0

Views: 1564

Answers (6)

Pete
Pete

Reputation: 58412

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/

Upvotes: 1

Jerska
Jerska

Reputation: 12002

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;

Upvotes: 0

Atrox111
Atrox111

Reputation: 527

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

Upvotes: 0

Xavier
Xavier

Reputation: 4007

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 :)

Upvotes: 1

artSx
artSx

Reputation: 1620

add this : 

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

JsFiddle with correction

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

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

Upvotes: 0

Related Questions