之字形边框CSS SVG

时间：2018-10-18 10:34:24

标签： css svg

我正在尝试创建一个锯齿形的边框，并尝试了几种不同的方法，但还没有到达那里。

这里有一个片段接近我的需要，但是我需要它作为边框（顶部），但之字形下方的背景-这可能吗，或者有其他方法可以做到这一点？

*{
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0; padding: 0;
}

html {
	font-size: 125%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}

p {
	font-size: 6vw;
}

.wave {
	/* escape character # with %23, duh! */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.01 13"><polyline fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" points="40.01 11.5 30.01 1.5 20.01 11.5 10.01 1.5 0.01 11.5"/></svg>');
	width: 100%;
	background-position: left top;
	background-size: 2.64vw auto; // or 1rem auto;
	background-repeat: repeat-x;
	display: inline-block;
	padding-bottom: 2vw;
	padding:50px;
	background-color:red;
}
<main>
	<!-- learning german is hard -->
	<p><span class="wave">Vergangenheitsbewältigungskultur</span></p>
</main>

这是我的目标： enter image description here

我认为我对SVG不够了解。我也看过border-image，但这又不太有效。

as this page states也许是一种使用遮罩和变换的方法？

非常感谢您的帮助！

2 个答案:

答案 0 :(得分：1)

如果我要完成此任务：

我将在具有透明背景的图形编辑器（Fireworks，PhotoShop等）中创建锯齿形的一部分。

然后，将其添加到我的CSS文件中的id或class元素中（属于它自己，或将其包含在body类中）。   正文{background：#FFF url（path / to / zig-zag）repeat-x;}

最后，在我的HTML结构中进行说明。它要么封装在body标签中，要么包含在“

”标签中。应该根据您希望图像相对于页面其他元素的显示位置来选择div或body标签。

（原谅我没有将其与svg相关...也许我简化了。）

已添加： 如果使用SVG的目的是使图像对于不同的屏幕尺寸（台式机，平板电脑，电话等）均可响应/可缩放，则可以在CSS文件中添加以下行：img {max-width：100％ ;高度：自动； } 如果将其列为独立行，则所有图形都应具有（模拟的）SVG效果。

答案 1 :(得分：0)

我正在使用SVG进行此操作。为了剪切图像，我使用了SVG蒙版。请阅读代码中的注释。

let h = 100,cy = h/2;// height and center y of the SVG canvas
let w = 200,cx = w/2;// width and center x
let step = 10;
let points = "";// the points for the zig-zag
let i = 0;
for(let x = -step/2; x < w+step; x+=step){
 let offset = i%2 == 0 ? step/2 : -step/2;
 let y = cy + offset;
 points += `${x},${y} `;
 i++
}


test.setAttributeNS(null,"points", points);


let pointsArray = points.split(" ");
let M = pointsArray.shift(0);

//top mask
let maskt_d = `M${M}L${pointsArray.join(" ")}V0H0,0Z`;
topPpath.setAttributeNS(null,"d",maskt_d)


// bottom mask
let maskb_d = `M${M}L${pointsArray.join(" ")}V${h}H0,hZ`;
bottomPath.setAttributeNS(null,"d",maskb_d)
<svg viewBox="0 0 200 100">
  <defs></defs>
  <mask id="top">
   <path id="topPpath" fill="white" d="" />
  </mask>
  <mask id="bottom">
   <path id="bottomPath" fill="white" d="" />
  </mask>
  
<image xlink:href="https://images.unsplash.com/photo-1509616899064-d9f6e4a2d531?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f3abe708740009632e6274a6c30a67d0" width="200" style="mask: url(#top)"></image>
<image xlink:href="https://images.unsplash.com/photo-1508246624309-f6a211db6352?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3a09831f551ee5f271719dbf30e4d694" width="200" style="mask: url(#bottom)"></image>
  

<polyline id="test" fill="none" stroke="green" stroke-width="5" points="" />
  
</svg>

实际上，除非需要进行特殊处理，否则无需剪切第一张图像。

相关问题
最新问题