不使用背景图像的CSS弯曲边框[关闭]答案

【问题标题】：Css curved border without using backgroung image [closed]不使用背景图像的CSS弯曲边框[关闭]
【发布时间】：2020-09-06 16:03:12
【问题描述】：

我想做类似picture 的事情。但我不想使用背景图片。还有其他方法吗？请解释一下。

【问题讨论】：

CSS 中没有任何东西可以轻松做到这一点（据我所知）。我会尝试用 SVG 来做这个。

标签： html css svg background-image border

【解决方案1】：

您需要使用某种图像或 svg 来执行此操作。但是您只需要锯齿状“边框”部分的图像。

这是一个使用内联 SVG 文件的示例。我已将 SVG 涂成黑色，这样您就可以看到它在哪里。如果底部的颜色和 SVG 匹配，那么你看不出区别。在您的示例图像中，SVG 和“底部”背景色均为橙色。

我在示例中使用了固定像素宽度以节省时间，但您可以轻松地使其具有响应性。 This article 擅长解释如何让 SVG 响应式的不同方法。

边框不必是 SVG。 SVG 确实提供了一个非常清晰的图像和一个很小的文件大小。但是，您可能会发现使用 png 文件制作响应式版本更容易。使用 png 的实现将非常相似。

.page {
  width: 400px;
}


/* This top section contains the jagged border svg */

.top {
  height: 150px;
  background-color: hotpink;
  position: relative;
  /* needed so svg child's absolute position works properly */
}

.top svg {
  position: absolute;
  bottom: 0;
  left: 0;
}


/* This bottom part just has a solid background color */

.bottom {
  height: 150px;
  background-color: orange;
}

<div class="page">
  <div class="top">
    Top section

    <!-- Start of Jagged border SVG. You can import this from a file if you prefer -->
    <svg width="400" height="28" viewBox="0 0 400 28" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M16.5 8H0V30C159.167 30.1667 463.5 30 479 30V12L468.5 9.5L460.5 0L452 4.5L442.5 8H425.5C423.5 8 412.5 0 408 0C404.422 0 394.333 13.3333 387.5 12L371.5 8H358.5L346 16.5C341.833 15 333 12 331 12H284L264.5 16.5C259.5 15.5 244.5 0 241.5 0C237.382 0 234 19.5 232 16.5L199 8L175.5 12L152 16.5L130 12H112.5L105 16.5L90 21L67 12H62.5L25.5 16.5L16.5 8Z" fill="black" />
      </svg>
    <!-- End of Jagged border SVG -->

  </div>

  <div class="bottom">
    Bottom section
  </div>

</div>

【讨论】：