How to create alligator (or sawtooth) border using CSS or SVG?

Question

alligator might not be the right word; I welcome a correction to the title.

I'd like container to have alligator border like in the picture bellow.

If the element in question had solid background, then pseudo-element trickery or CSS3 border-image could be used. However, in this case, the content of the container is a non repeating pattern.

Alternatively, it is possible for the image itself to have the border. However, because of the way image expands (animation used to reveal the image), that's not possible.

The only alternative I can think is SVG.

Answer 1

You can do this in SVG with a mask, a clip-path or a filter. Here is an example using a Clip-path with relative sizing so it will work on content of any size.

<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>

This works cross browser (IE9+): http://codepen.io/mullany/pen/eylzt