鳄鱼可能不是正确的词；我欢迎对标题进行更正。
我希望容器有鳄鱼边框，如下图所示。
border-image如果所讨论的元素具有纯色背景，则可以使用伪元素技巧或 CSS3 。但是，在这种情况下，容器的内容是不重复的模式。
或者，图像本身可以具有边框。但是，由于图像扩展的方式（用于显示图像的动画），这是不可能的。
我能想到的唯一选择是 SVG。
问问题
4718 次
6 回答
3
您可以在 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
于 2013-10-25T03:06:42.427 回答
1
根据您的向后兼容性要求，CSS3border-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;
}
于 2013-10-24T15:36:06.723 回答
1
可以在 webkit 浏览器中使用 mask-box-image，其工作方式类似于 border-image，如下所示：
将此应用于您想要的元素（参见语法）：
-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"”。在我的示例中，我将路径中的所有值除以 500，即路径的原始宽度。它可以扩展一点，看起来不像 webkit 那样好，但工作得很好。
于 2014-03-06T13:59:06.703 回答
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%);
}
此解决方案的缺点是，如果它是底部边框，您需要知道元素高度。结合 JavaScript（计算元素尺寸和更新 CSS），这很有效。
于 2013-10-24T17:50:07.650 回答
0
这是一个旧线程，但如果其他人需要使用之字形边框，我已经为它制作了一个 sass mixin。
// 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%;
}
}
}
于 2015-02-08T16:20:22.570 回答
-1
这是一个可能的解决方案。使用菱形 PNG 并将其设置为容器内的多个背景。您将必须想出一种方法来缩放钻石，使其正确填充边缘（也许使用 SASS？）。
将钻石设置为沿边缘重复。
这是一个简单的例子：http ://codepen.io/KurtWM/pen/tnzwj
这是它的 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属性的情况下，这些值的速记中没有位置，所以我们只需要确保我们也放入了多个用逗号分隔的值，并确保它们与速记属性的顺序相同。
于 2013-10-24T20:36:46.393 回答