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

时间：2013-10-24 14:15:03

标签： css3 svg

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

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

alligator title

如果相关元素具有可靠的背景，则可以使用伪元素欺骗或CSS3 border-image。但是，在这种情况下，容器的内容是非重复模式。

或者，图像本身可能具有边框。但是，由于图像扩展的方式（用于显示图像的动画），这是不可能的。

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

6 个答案:

答案 0 :(得分：1)

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

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

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

最后，这是一个与他们一起玩的工具：http://border-image.com/

<强>更新

只要图像背后的背景具有稳固的背景，border-image就可以正常工作。 只需包含一个带有锯齿边界的内部<div>。

HTML 

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

Demo here

答案 1 :(得分：1)

您可以使用蒙版，剪辑路径或过滤器在SVG中执行此操作。下面是一个使用具有相对大小的Clip-path的示例，因此它可以处理任何大小的内容。

enter image description here 

<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

答案 2 :(得分：1)

可以在webkit浏览器中使用mask-box-image，其工作方式与border-image类似，如下所示：

example of sawtooth border using SVG masks

将其应用于您想要的元素（请参阅syntax）：

-webkit-mask-box-image: url('./sawtooth.svg') 20 0 20 0 repeat;

示例SVG（可能更小）：

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="500"
   height="500"
   viewBox="0 0 500 500"
   preserveAspectRatio="none"
   version="1.1">
  <defs />
  <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
  <path
         fill="#fff"
         d="M 0,0 0.02,0.02 0.04,0 0.06,0.02 0.08,0 0.1,0.02 0.12,0 0.14,0.02 0.16,0 0.18,0.02 0.2,0 l 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0.02,0.02 0.02,-0.02 0,1 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 -0.02,-0.02 -0.02,0.02 L 0.18,0.98 0.16,1 0.14,0.98 0.12,1 0.1,0.98 0.08,1 0.06,0.98 0.04,1 0.02,0.98 0,1 z" />
  </mask>
  <g>
    <path
       fill="#000"
       d="M 0,0 10,10 20,0 30,10 40,0 50,10 60,0 70,10 80,0 90,10 100,0 l 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 10,10 10,-10 0,500 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 -10,-10 -10,10 L 90,490 80,500 70,490 60,500 50,490 40,500 30,490 20,500 10,490 0,500 z" />
  </g>
</svg>

以下内容也适用于带有提供的SVG的Firefox：

mask: url('./sawtooth.svg#mask'

但请记住，必须将掩码路径转换为相对值（0到1），并且掩码必须具有“maskUnits =”objectBoundingBox“maskContentUnits =”objectBoundingBox“”set。在我的例子中，我将路径中的所有值除以500，这是路径的原始宽度。它有点缩放，看起来不像webkit一样好，但效果还不错。

答案 3 :(得分：0)

这是另一个，但不完美的，解决方案。

<强> HTML 

<div id="aux-container">
    <div id="test-area"></div>
</div>

<强> CSS 

#aux-container {
  background: -webkit-linear-gradient(top, #fd7465 0%,#cf0404 100%); width: 200px; height: 200px; overflow: hidden;
}

#test-area {
  background: -webkit-linear-gradient(top, #2d3576 0%,#818cdf 100%); width: 160px; height: 160px; margin: 20px;

  -webkit-clip-path: polygon(0 100%, 0px 0px, 20px 20px, 40px 0, 60px 20px, 80px 0, 100px 20px, 120px 0, 140px 20px, 160px 0, 160px 100%);
}

http://jsbin.com/emOKIgU/1/

此解决方案的缺点是，如果它是底部边框，则需要知道元素高度。结合JavaScript（计算元素维度和更新CSS），这是有效的。

答案 4 :(得分：0)

这是一个老线程，但如果其他人需要使用之字形边框，我就为它制作了一个混合线。

// always use even numbers for size (or else you will get half pixel for height). Without 'px'. Only works with pixels
// don't add hash # for color

@mixin jagged($color: 000, $size: 16, $location: bottom, $type: fill, $side: outside, $animate: false) {
  $width: $size;
  $height: $width / 2;
  $scale: $width / 16;
  $rotate: '0';
  $pseudo: if($location == top or $location == left, before, after);

  @if $side == inside {
    @if $location == bottom {
      $rotate: "180 8 4";
    } @else if $location == left {
      $rotate: "270 8 8";
      $height: $size;
      $width: $size / 2;
    } @else if $location == right {
      $rotate: "90 4 4";
      $height: $size;
      $width: $size / 2;
    }
  } @else {
    @if $location == top {
      $rotate: "180 8 4";
    } @else if $location == right {
      $rotate: "270 8 8";
      $height: $size;
      $width: $size / 2;
    } @else if $location == left {
      $rotate: "90 4 4";
      $height: $size;
      $width: $size / 2;
    }
  }
  $arrow: "data:image/svg+xml,%3Csvg%20width%3D%22#{$width}px%22%20height%3D%22#{$height}px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C%200%208%2C%208%2016%2C0%22%20fill%3D%22%23#{$color}%22%20transform%3D%22scale%28#{$scale}%29%20rotate%28#{$rotate}%29%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E";
  $wave: "data:image/svg+xml,%3Csvg%20width%3D%22#{$width}px%22%20height%3D%22#{$height}px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.00025863%2C0%20L0%2C6.59417725%20L0%2C8%20L8.00025885%2C1.40509033%20L16%2C8%20L16%2C6.59417725%20L8.00025863%2C0%20Z%22%20fill%3D%22%23#{$color}%22%20transform%3D%22scale%28#{$scale}%29%20rotate%28#{$rotate}%29%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";
  position: relative;

  &:#{$pseudo} {
    content: '';
    position: absolute;
    z-index: 10;

    @if $animate {
      animation-duration: $animate;
      animation-name: if($location == bottom or $location == top, slide-hoz, slide-vet);
      animation-iteration-count: 1;
    }

    @if $location == top {
      height: #{$height}px;
      left: 0;
      right: 0;
      @if $side == inside {
        top: 0;
      } @else {
        top: -#{$height}px;
      }
    } @else if $location == right {
      width: #{$width}px;
      top: 0;
      bottom: 0;
      @if $side == inside {
        right: 0;
      } @else {
        right: -#{$width}px;
      }
    } @else if $location == bottom {
      height: #{$height}px;
      left: 0;
      right: 0;
      @if $side == inside {
        bottom: 0;
      } @else {
        bottom: -#{$height}px;
      }
    } @else if $location == left {
      width: #{$width}px;
      top: 0;
      bottom: 0;
      @if $side == inside {
        left: 0;
      } @else {
        left: -#{$width}px;
      }
    }

    @if $location == top {
      @if $side == inside {
        background-image: url($arrow);
      } @else {
        @if $type == fill {
          background-image: url($arrow);
        } @else {
          background-image: url($wave);
        }
      }

    } @else {
      @if $side == inside {
        background-image: url($arrow);
      } @else {
        @if $type == fill {
          background-image: url($arrow);
        } @else {
          background-image: url($wave);
        }
      }
    }
  }

  @keyframes slide-hoz {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }

  @keyframes slide-vet {
    from {
      height: 0;
    }
    to {
      height: 100%;
    }
  }
}

工作示例：http://codepen.io/gilbarbara/pen/pvwmEb

答案 5 :(得分：-1)

这是一个可能的解决方案。使用菱形PNG并将其设置为容器内的多个背景。您将不得不找到一种方法来缩放钻石，使其正确填充边缘（也许使用SASS？）。

将钻石设置为沿边缘重复。

以下是一个简单示例：http://codepen.io/KurtWM/pen/tnzwj

enter image description here

这是SASS代码。 #container只是一个DIV：

$diamondImage: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAABJCAYAAABxcwvcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNrs2MtNxDAQBuD82wCtQAfcKWEvUBlcKIH7drC0sh2QSOHAksSveXnGv2RZ9vHTyB57mgzl6ev8sIzJWGAJaJ4u6/L5+vJ5G0jbQI/r1rclKBgEmqxBwSiQKSgYBjIDBeNAJqDQAZA6FDoBUoVCR0BqUOgMSAUKHQKJQ6FTIFEodAwkBoXOgUSg4ACIHQpOgFih4AiIDQrOgFig4BCIHApOgUih4BiIDArOgUigEACoGQpBgJqgEAioGgrBgKqgEBCoGApBgYqgEBgoGwrBgbKgMIDSUBhAaSgMoDQUBlAaCgMoDXUaQLtZTC5LEZ1WsZGdaloq6fdMep+n12HyJx8z0Nv97TagNoC2+qQBdQe013FHhvoHdPR2iwi1CZT6BYgEtQt0iBQI6hAoiRQAKgmUheQYKgsoG8khVDZQEZIjqCKgYiQHUMVAVUgdQ1UBVSN1CFUN1ITUEVQTUDNSB1DNQCRIhqFIgMiQDEKRAZEiGYIiBSJHMgBFDsSCpAjFAsSGpADFBsSKJAjFCsSOJADFDiSCxAglAiSGxAAlBiSKRAglCiSORAAlDqSC1AClAqSGVAGlBqSKVAClCqSOlAGlDmQC6QDKBJAZpA0oM0DmskCtWKbyI8AAeriJOZujgcgAAAAASUVORK5CYII=);

#container {
  width: 400px;
  height: 300px;
  border: 8px solid #31b55b; // border matches the diamond color.
  background: 
    $diamondImage repeat-x -15px -15px, 
    $diamondImage repeat-x -15px 285px,  
    $diamondImage repeat-y 385px -15px,  
    $diamondImage repeat-y -15px -15px,
  url(http://placekitten.com/g/400/300) no-repeat;
  // Had to play with these numbers a bit to get a nice fit.
  background-size: 31px 31px, 31px 31px, 30px 30px, 30px 30px, 100% 100%;
}

// It may be possible to use calculations within SASS to set the diamond size, based on the picture dimensions. For example: if you know the size of the image, or the percentage that the image is to its parent, you should be able to calculate a balanced size for the diamonds so that they will fit the edges nicely.

如果您不熟悉多个背景的工作方式;用逗号分隔参数。如果您使用background速记属性，这是最简单的。在background-size属性的情况下，这些值的缩写没有位置，所以我们只需要确保我们还输入用逗号分隔的多个值，确保它们的顺序与速记属性。

相关问题
最新问题