如何使用CSS或SVG创建鳄鱼（或锯齿）边框？ [英] How to create alligator (or sawtooth) border using CSS or SVG?

问题描述

鳄鱼可能不是正确的词;

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.

如果有问题的元素有实体背景，那么可以使用伪元素欺骗或CSS3 border-image 。但是，在这种情况下，容器的内容是不重复的模式。

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.

我可以想到的唯一选择是SVG。

The only alternative I can think is SVG.

推荐答案

可以在webkit浏览器中使用mask-box-image，它的工作原理类似于border-image如下：

One can use mask-box-image in webkit browsers, which works similarly to border-image as following:

将此应用到您所需的元素（请参阅语法）：

Apply this to your desired element (see syntax):

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

示例SVG（可能更小）：

Example SVG (could be smaller):

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

以下也适用于Firefox和提供的SVG：

The following also works for Firefox with the provided SVG:

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

请记住，掩码路径必须转换为相对值（0到1），掩码必须有maskUnits =objectBoundingBoxmaskContentUnits =objectBoundingBoxset。在我的例子中，I将路径中的所有值除以500，这是路径的原始宽度。它缩放一点，看起来不如webkit位好，但工作得很好。

Keep in mind however, that the mask path must be converted to relative values (0 to 1) and the mask must have "maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"" set. In my example, I divided all values in the path by 500, which is the original width of the path. It scales a bit and doesn't look as good as the webkit bit, but works well enough.

这篇关于如何使用CSS或SVG创建鳄鱼（或锯齿）边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！