4

理解できません。矢印付きの単純な線が必要なので、境界線と背景画像を持つクラスを使用します。

hr {
    padding-top: 10px;
    border: none;
    border-top:dotted #000 1px;
    background: #fff url("img/arrow.gif") no-repeat 100px -1px;
 }

残念ながら、背景は境界線の下にあります:

ここに画像の説明を入力

z-index「id Beats class」（ を使用）を試しまし<hr id="arrow">たが、何も機能しませんでした。解決策はありますか？

ところで、css-cracks はどのようにしてこのような矢印付きの点線を作成するのでしょうか?

4

3 に答える 3

4

<strong>編集: :after なしでこれを行うことを検討してきました。

私が思いつくことができる最高のものはこれです：

.box3 {
    z-index: 100;
    border: none;
    padding: 10px 0 30px 0;    
    background-image: url("http://test.mark-design.co.uk/4ik4e7ic.png"), url('http://test.mark-design.co.uk/line.png');
    background-position: 50% -1px, left top;
    background-repeat: no-repeat, repeat-x;
}

CSS3 で複数の背景を使用するため、まだ大規模にサポートされることはありませんが、機能し、かなり興味深い方法です - http://jsfiddle.net/spacebeers/T8Yzj/39/

パディングと同様に画像を微調整する必要がありますが、結果は健全です。

于 2012-07-25T15:50:15.313 に答える
3

背景画像は常にコンテナーの境界線で囲まれます。

参照: http://reference.sitepoint.com/css/boxmodel

矢印を追加するには、以下の追加要素が必要です。:afterこれは、目的の要素で使用することで実現できます。

/* not tested */
hr {
    position: relative;
    margin-top: 10px;
    border-bottom: 1px dotted #000;
}

hr:after {
    content: "";
    position:absolute;
    right: 0px; top:0px;
    width: 16px; height: 16px;
    background: transparent url("img/arrow.gif") no-repeat right top;
}
于 2012-07-25T15:56:58.717 に答える
0

画像の代わりに CSS 三角形を使用することを検討してください。

<hr class="arrow">

CSS:

.arrow {
    position:relative
}

.arrow:after {
    content: "";
    position:absolute;
    top:0px;
    left:100px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;    
    border-top: 10px solid #000;
}

フィドル

于 2012-07-25T15:52:58.950 に答える