html - 根据屏幕大小更改部分分隔符大小

Question

我正在尝试在 https://sparktoro.com/ 上重新创建部分分隔符.请注意分隔线(之字形和波浪线)的大小如何根据屏幕大小而变化。例如，在小屏幕上可能有 3 个峰值，在大屏幕上可能有 10 个峰值。

在我的版本中，峰的数量保持不变，而图像只是拉伸(stretch)开来。这会导致分隔线看起来模糊和扭曲。

我尝试在 HTML 中将分隔线作为图像添加并将宽度设置为 100%。

<header class="grey-bg">
   <img class="header__logo" src="https://sparktoro.com/img/sparktoro-logo.c08f697d63cf1cb31c7388dd16efbfa9.svg">
</header>
<div class="white-bar">
   <img class="zigzag" src="https://i.ibb.co/9YryFMN/zig.png">
</div>
<div class="blue-bg section"></div>
<div class="white-bar">
   <img class="wavy" src="https://i.ibb.co/xLT7Wh4/imageedit-5-8200179975.png">
</div>

*{
     margin: 0;
}

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

 .header__logo{
     width: 200px;
     padding: 25px;
     text-align: center;
}

 .grey-bg{
     background-color: #f4f4f4;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23d8d8d8' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

 .blue-bg{
     background-color: #c4e3e8;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23b9dfe5' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

 .white-bar{
     height: 10px;
     position: relative;
}

 .section{
     height: 300px;
}

 .zigzag{
     width: 100%;
     position: absolute;
     top: -10px;
     height: 30px;
}

 .wavy{
     width: 100%;
     height: 30px;
     position: absolute;
     top: -10px;
}

我希望我的分隔线能够像 https://sparktoro.com/ 上那样响应屏幕尺寸.

Answer 1

sparktoro.com 的实现方式是使用重复图像。所以他们的 svg 只是一个重复的“波浪”，所以根据屏幕尺寸，你会得到或多或少的“波浪”

要获得相同的效果，请将此添加到您的背景中

background: url(/img/wavy-line.svg) repeat-x center center;

这将在 x 轴上一遍又一遍地重复 img/svg。

要了解应该如何制作 svg，请查看他们的

https://sparktoro.com/img/wavy-line.svg