Convert Svg Zigzag border to Css

HTML-CSS
1

How would this be done?

code: https://jsfiddle.net/zb3gtxfn/

html {
  height: 100%;
}

body {
  margin: 0;
  background-color: maroon;
  height: 100%;
}

.half {
  height: 100%;
  background-color: red;
  width: 50%;
  background-size: 86.65511265px 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.154"><path d="M1 1.154L0 0.577 1 0" fill="maroon"/></svg>');
  background-repeat: repeat-y;
  background-position: 100% 0;
}

<div class="half"></div>

2

Have you tried a search engine? There’s tons of results, including the full code for each solution, and links to working examples on jsfiddle.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.