Convert Svg Zigzag border to Css

How would this be done?


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="" 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>

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

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