0

基本的に、ページの上部に三角形の行が必要です。下向きにする必要があります。私はCSSで三角形を作成しましたが、何らかの理由で、それらが必要なように一列に並んでいるのではなく、互いに上下に移動したいのです。

CSSの経験が豊富な人は見てもらえますか? ありがとう。

HTML:

<div class="triangle-container">

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

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

</div>

CSS:

/* BODY */

body
{
    background-color: #eee;
    height: 100%;
    width: 100%;
    z-index: 1;
    padding: none;
    border: none;
    margin: none;
}

/* Triangles! */

.triangle-container
{
    display: inline;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.arrow-down
{
    margin-left:auto;
    margin-right:auto;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:50px solid #FF6A00;
}

jsFiddle デモ

4

2 に答える 2

5

display:inlineコンテナではなく、インラインで表示したい要素に適用する必要があります。

あなたの場合、要素として動作する要素であるinline-blockため、それは である必要があります。詳細はこちらをご覧ください。inlineblock

に置きdisplay:inline-block、.arrow-downから削除し.triangle-containerます。

.triangle-container
{
    display: inline; /* Remove this line */
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.arrow-down
{
    display: inline-block; /* Add this line */
    margin-left:auto;
    margin-right:auto;
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:50px solid #FF6A00;
}

ライブデモ: jsFiddle

于 2012-09-30T17:09:32.203 に答える
2

float:leftあなたの.arrow-downクラスに を追加しました。（そしていくつかのクラスを更新しました）

ここでフィドル：http://jsfiddle.net/KwKe8/

于 2012-09-30T17:09:13.347 に答える