时间戳

首页 > 解决方案 > 有没有办法为 div 创建波浪形边框半径，以及使用图像背景的最佳方法是什么

javascript - 有没有办法为 div 创建波浪形边框半径，以及使用图像背景的最佳方法是什么

问题描述

我正在尝试为 div 制作波浪形边框，就像我附加的图片一样在此处输入图像描述

我试图将其切片并将其作为图像背景

  #section-2{
      background-image: url(../images/section-2bg.png);
      background-repeat: no-repeat;
      /* Full height */
      height: 100%;
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

这是HTML

  <section id="section-2" class="section-prod-comparison">
            <div class="row">
                <div class="col-lg-6">
                 <div class="col-lg-6"></div>
                </div>
            </div>
  </section>

但图像不适合屏幕，我无法自定义它以遵循设计这里是结果 在此处输入图像描述

有没有办法使用 CSS 制作它？或者我只需要使用图像作为背景，那么如何使图像背景与设计一样并且响应良好

谢谢你

标签： javascripthtmlcssbackground-imagephotoshop

解决方案

将 SVG（具有这些路径和形状）放入 div 容器中。您可以使用此站点生成 wave svg 或制作/查找其他站点。

推荐阅读