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

Question

alligator 可能不是正确的词；欢迎对标题进行更正。

我希望容器有鳄鱼皮边框，如下图所示。

如果相关元素有纯色背景，则可以使用伪元素技巧或 CSS3 border-image。然而，在这种情况下，容器的内容是一个非重复模式。

或者，图片本身也可以有边框。但是，由于图像扩展的方式(用于显示图像的动画)，这是不可能的。

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

Answer 1

您可以在 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