0

画像のような、点線をはさみで切る画像があります。

点線のはさ​​み

基本的に、すべてのページのフッターに画像を配置したいと考えています。ページの幅の約 90% が点線で埋められるように、ページ上で点線を水平に配置し、その後にハサミを配置して、ハサミのように見えるようにします。ページを横切る。

これを CSS で行いたいのですが、これをすべての画面解像度で動作させる必要があります。しかし、問題は、これをどのように実装して、すべてのブラウザーとすべてのバージョンで動作するようにするかということです。誰かがこれについて助けてくれれば幸いです。これが jQuery で簡単にできるのであれば、私もそれを受け入れます。

これは私がこれまでに持っているものです：

.bottom_border_scissor img{
  margin-top: -23px;
 }
.bottom_border_scissor {
  text-align: left;
  margin-left: 81%;
  background: url(../images/bottom_without_dot.png) repeat-x 0 center transparent;

}
4

1 に答える 1

9

2018-02-16 に回答に追加された更新バージョン

バージョン 1 - 追加のコンテナが必要

この猫の皮を剥く方法は次のとおりです...

ページ幅の 90% を占める div を作成します。この div には、はさみの背景画像 (点線を除く) を指定します。最後に、子 div を内部に配置し、点線として表示されるようにスタイルを設定します。

点線のないはさみ

HTML

<div id="scissors">
    <div></div>
</div>

CSS

#scissors {
    height: 43px; /* image height */
    width: 90%;
    margin: auto auto;
    background-image: url('http://i.stack.imgur.com/cXciH.png');
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
}
#scissors div {
    position: relative;
    top: 50%;
    border-top: 3px dashed black;
    margin-top: -3px;
}

デモ: http://jsfiddle.net/4CxZH/

バージョン 2 - 単一要素

HTML

<div id="scissors"></div>

CSS

#scissors {
    height: 43px; /* image height */
    width: 90%;
    margin: auto auto;
    background-image: url('http://i.stack.imgur.com/cXciH.png');
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    overflow: hidden;
}
#scissors:after {
    content: "";
    position: relative;
    top: 50%;
    display: block;
    border-top: 3px dashed black;
    margin-top: -3px;
}

デモ: https://jsfiddle.net/4CxZH/99/

于 2013-09-05T10:57:09.013 に答える