Question

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

Answer 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>

CSS弯曲的边框而不使用背景图像

1 个答案: