Зигзаг границы CSS SVG

Question

Я пытаюсь создать зигзагообразную границу и пробовал несколько разных способов, но не совсем туда добираюсь.

Вот фрагмент кода, близкий к тому, что мне нужно, но он мне нужен как граница (вверху) но фон под зигзагами - это возможно, или есть другой способ сделать это?

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

Вот к чему я стремлюсь:

Не думаю, что понимаю достаточноSVGs.Я также посмотрел на border-image, но опять же это не совсем работает.

Может быть, способ с масками и преобразованиями, , как говорится на этой странице ?

Любая помощьс благодарностью!

Answer 1

Я делаю это с 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>

Фактически нет необходимости вырезать первое изображение, если вам не нужно делать с ним что-то особенное.

Answer 2

Если бы я пытался сделать это:

Я бы создал часть зигзага в графическом редакторе (Fireworks, PhotoShop и т. Д.) С прозрачным фоном.

ТогдаЯ бы добавил его к элементу id или class (своего собственного или включил его в класс body) в моем файле CSS.body {background: #FFF url (path / to / zig-zag) repeat-x;}

И, наконец, укажите это в моей структуре HTML.Он либо инкапсулируется в теге body, либо включается в тег "

".Тег div или body следует выбирать в зависимости от того, где вы хотите, чтобы изображение отображалось по отношению к другим элементам вашей страницы.

(извините за то, что я не связал это с svg ... возможно, я слишком упрощенit.)

Добавлено: Если цель использования SVG заключается в том, чтобы изображение было адаптивным / масштабируемым для разных размеров экрана (рабочий стол, планшет, телефон и т. д.), вы можете включить следующую строку вCSS-файл: img {max-width: 100%;высота: авто;} Если вы перечислите его как отдельную строку, то все ваши рисунки должны иметь (смоделированный) SVG-эффект.