alligator 可能不是正确的词;欢迎对标题进行更正。
我希望容器有鳄鱼皮边框,如下图所示。
如果相关元素有纯色背景,则可以使用伪元素技巧或 CSS3 border-image
。然而,在这种情况下,容器的内容是一个非重复模式。
或者,图片本身也可以有边框。但是,由于图像扩展的方式(用于显示图像的动画),这是不可能的。
我能想到的唯一选择是 SVG。
最佳答案
您可以在 SVG 中使用蒙版、剪辑路径或过滤器来执行此操作。这是一个使用具有相对大小的剪辑路径的示例,因此它可以处理任何大小的内容。
<svg width="900" height="600" viewBox="0 0 900 600"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="sawtoothClip" clipPathUnits="objectBoundingBox">
<path d="M .00 0.025
l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025 l -0.025 0.025 l 0.025 0.025
l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025 l 0.025 0.025 l 0.025 -0.025
l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025 l -0.025 -0.025 l 0.025 -0.025
l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025 l -0.025 -0.025 l -0.025 0.025
z"
/>
</clipPath>
</defs>
<image x="0" y="0" width="900" height="600" preserveAspectRatio="none" clip-path="url(#sawtoothClip)"
xlink:href="http://4hdwallpapers.com/wp-content/uploads/2013/05/Nature-Blue-Sky-Wallpaper.jpg"/>
</svg>
这适用于跨浏览器 (IE9+):http://codepen.io/mullany/pen/eylzt
关于css - 如何使用 CSS 或 SVG 创建鳄鱼(或锯齿)边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40419177/