如何使用CSS或SVG创建鳄鱼(或锯齿)边框？

Question

鳄鱼可能不是正确的词; 我欢迎对标题进行更正.

我希望容器能够像下图中那样有鳄鱼边框.

如果所讨论的元素具有可靠的背景,则border-image可以使用伪元素欺骗或CSS3 .然而,在这种情况下,容器的内容是非重复图案.

或者,图像本身可以具有边界.但是,由于图像扩展的方式(用于显示图像的动画),这是不可能的.

我能想到的唯一选择是SVG.

Answer 1

根据您的向后兼容性要求，CSS3border-image属性可能适合。

请参阅： http: //www.w3.org/TR/css3-background/#border-images

它们适用于所有浏览器的最新版本：http ://caniuse.com/#search=border-image

最后，这是一个使用它们的工具： http: //border-image.com/

更新：

只要图像后面的背景有纯色背景，border-image就可以工作。只需包含一个<div>带有锯齿边框的内部即可。

超文本标记语言

<div class="image">
    <div class="sawtooth"></div>
</div>

CSS

BODY {
   background: black;
}

DIV.image {
   width: 480px;
   height: 325px;
   background: url(http://i.imgur.com/ux7a7pi.jpg);
}

DIV.sawtooth {
   width: 426px;
   height: 271px;
}

.sawtooth {
   border-style: solid;
   border-width: 27px;
   border-image: url(http://i.imgur.com/Usmr9yF.png) 27 round;
}

演示在这里