在页面底部添加带虚线的剪刀

Question

我有一张剪刀划过虚线的图像，类似于图像中的图像：

基本上，我希望将图像放在我所有页面的页脚上。我希望虚线在页面上水平移动，以便大约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;

}

Answer 1

更新版本已添加至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;
}

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

DEMO： https://jsfiddle.net/4CxZH/99/