Css 不使用背景图片的弧形边框

Question

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

Answer 1

您需要使用某种图像或 svg 来执行此操作。但是你只需要锯齿状 "border" 部分的图像。

这是一个使用内联 SVG 文件的示例。我已将 SVG 涂成黑色，以便您可以看到它的位置。如果底部部分的颜色和 SVG 匹配，那么您看不出有什么不同。在您的示例图像中，SVG 和 "bottom" 背景色都是橙色。

为了节省时间，我在示例中使用了固定像素宽度，但您可以轻松地使其具有响应性。 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>

Css 不使用背景图片的弧形边框

Css curved border without using backgroung image

html

css

svg

border

background-image