Css curved border without using backgroung image

Question

I want to do something like the picture . But i don't want to use background image. Is there any other way to do it? Please Explain.

Answer 1

You'll need to use some kind of image or svg to do this. But you only really need the image for the jagged "border" part.

Here is an example using an inline SVG file. I have colored the SVG in black so you can see where it is. If the color of the bottom section and the SVG match, then you can't see the difference. In your example image, both the SVG and "bottom" background-color would be orange.

I have used fixed pixel widths in the example to save time, but you could easily make this responsive. This article is good at explaining different ways how to make SVGs responsive.

The border does not need to be an SVG. SVG does give a very sharp image with a tiny filesize. However you may find it easier to make a responsive version using a png file. The implementation with a png would be very similar.

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