0

私の質問は次の質問に似ています: Arrow Box with CSSしかし、1 つのボックスだけではなく、複数のボックスを揃える必要があります。それでも、すべてのボックスに矢印が表示されます。

この例では: http://jsfiddle.net/casperskovgaard/LHHzt/1/左に浮かぶ 2 つの矢印ボックスを作成しました。問題は、最初のボックスの矢印が表示されないことです。

矢印を表示するにはどうすればよいですか?

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

編集：

最初の矢印は、右側のボックスに重なる必要があります。artSx のソリューションを参照してください: http://jsfiddle.net/LHHzt/6/このソリューションに欠けているのは、複数の (3 つ以上の) ボックスを追加できることだけです。

4

6 に答える 6

1

これを追加 ：

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

JsFiddle 修正あり

于 2013-06-28T13:53:35.797 に答える
1

z-indexに aを追加するだけ.arrow:beforeです。ここにライブバージョンがあります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;
}

好きなだけボックスで動作します:)

于 2013-06-28T13:53:47.647 に答える
1

after 疑似要素の z-index を 2 に変更してから before 要素を 1 に変更すると、意図したとおりに動作するはずです。

.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/

于 2013-06-28T14:18:54.117 に答える
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;
}
于 2013-06-28T13:53:00.073 に答える
0

margin矢印に a を追加するだけです...

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

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

またはz-index、オーバーレイする場合は上に表示するように変更します

于 2013-06-28T13:54:43.787 に答える
0

矢印にマージンを追加するだけで問題が解決します。

この JSFiddle を参照してください: http://jsfiddle.net/LHHzt/9/

私はちょうど追加しました

margin-right: 15px;
于 2013-06-28T13:55:26.943 に答える