3

CSSを使用したHTMLマークアップは、このリンクで確認できます。ここでは、ボックスのある最後の三角形が正常に表示されていることがわかります。実はここで箱で3つの三角形を作りました。すべてに1つのボックスがあり、三角形が作成されます。box-1-wrap, box-2-wrapbox-3-wrap

ここで、最初のdivの三角形を表示したいと思います。彼らは一列に並んでいます。したがって、ここでは、最初の行を2番目のボックスのすぐ上に表示し、2番目の三角形を3番目のボックスのすぐ上に表示する必要があります。

ここの誰かが親切に私をここで助けてくれますか？

出力ファイルは次のようになります。

ここに画像の説明を入力してください

4

3 に答える 3

4

あなたがしなければならないのは、前のボックスの下に連続する各ボックスを配置することです。

これをCSSに追加します。

.box-1-wrap{
    position:relative;
    z-index:3;
}
.box-2-wrap{
    position:relative;
    z-index:2;
}
.box-3-wrap{
    position:relative;
    z-index:1;
}

これがデモンストレーションです：http：//jsfiddle.net/PrDyq/11/

于 2012-12-17T12:28:25.763 に答える
0 
.box-1-wrap, .box-2-wrap, .box-3-wrap {
  display: inline-block;
}
.light-blue-box {
  padding: 20px 40px;
  height: 0;
  background: #2D98F0;
  display:inline-block;
}
.arrow-first {
width: 0;
height: 0;
border-left: 20px solid #2D98F0;
border-top: 20px solid #2B90E3;
border-bottom: 20px solid #2B90E3;
display: inline-block;
margin: 0 0 0 -5px;
}
.light-blue-box-2 {
  padding: 20px 40px;
  height: 0;
  background: #2B90E3;
  display:inline-block;
  margin:0 0 0 -4px;
  z-index:999;
}
.arrow-second {
  width: 0;
  height: 0;
  border-left: 20px solid #2B90E3;
border-top: 20px solid #2879BB;
border-bottom: 20px solid #2879BB;
  display: inline-block;
  margin: 0 0 0 -5px
}
.light-blue-box-3 {
  padding: 20px 40px;
  height: 0;
  background: #2879BB;
  display:inline-block;
  margin:0 0 0 -4px;
  z-index:999;
}
.arrow-third {
  width: 0;
  height: 0;
  border-left: 20px solid #2879BB;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  display: inline-block;
  margin: 0 0 0 -5px
}

このコードを追加して確認してください

于 2012-12-17T12:25:03.970 に答える
0

cssとhtmlが少ないより一般的なソリューション：http：//jsfiddle.net/Z5pTR/1/

first-childIE <9をサポートするには、;を使用するのではなく、最初と最後の要素に手動で注釈を付ける必要があります。:aftercss3を使用し、最後に使用しないのではなく、最後に1つのプレースホルダーを追加しhslaます。

于 2012-12-17T13:16:36.403 に答える