Looking for assistance in creating an overlapping effect between two divs using an SVG?

I am attempting to create an effect where the bottom div overlaps the top one with a wavy SVG, giving the illusion of a wavy line on the bottom div that extends into the top div

However, my current result is different than what I expected. It looks like this: https://i.sstatic.net/Rtilp.png

I have made several attempts to correct it, but I have been unable to find a solution.

 * {
        margin: 0%;
        padding: 0%;
    }
    .header-container {
        width: 100%;
        height: 1000px;
    }
    
    .header-top {
      width: 100%;
      height: 50%;
      background-color: #3C8DAD;
    }
    
    .header-bottom {
        width: 100%;
        height: 50%;
        background-color: #F5A962;
    }
 <div class="header-container">
        <div class="header-top"></div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#F5A962" fill-opacity="1" d="M0,192L48,192C96,192,192,192,288,186.7C384,181,480,171,576,192C672,213,768,267,864,261.3C960,256,1056,192,1152,176C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
            <div class="header-bottom">
        </div>
    </div>

htmlcsssvg

Answer №1

It seems like you're not entirely clear on your end goal, but based on what you have, you could reset the display or vertical-align on the SVG and simply apply a blue background to the parent container. This is more of a comment with a demonstration rather than a direct answer, as I would also need clarification on your intended use. You could potentially send the SVG to the background over a gradient.

If we modify your code slightly with some CSS changes: 

* {
  margin: 0%;
  padding: 0%;
}

.header-container {
  width: 100%;
  height: 1000px;
  background-color: #3C8DAD;
}

.header-top {
  width: 100%;
  height: 50%;
}

svg {
  vertical-align: top;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #F5A962;
}
<div class="header-container">
  <div class="header-top"></div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#F5A962" fill-opacity="1" d="M0,192L48,192C96,192,192,192,288,186.7C384,181,480,171,576,192C672,213,768,267,864,261.3C960,256,1056,192,1152,176C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
  <div class="header-bottom">
  </div>
</div>

Setting a height of 1000px + two containers each with 50% height and including an SVG may not align with your desired outcome ;) especially considering how the markup might be used.

Answer №2

To achieve the desired result, border of the svg file needs to be removed.

Answer №3

I'm not entirely sure what you're looking for, but I believe something similar to this might be helpful.

You can try using these styles:

* {
  margin: 0%;
  padding: 0%;
}

.header-container {
  width: 100%;
  height: 1000px;
  position: relative;
}

.header-top {
  width: 100%;
  height: 50%;
  background-color: #3c8dad;
  position: relative;
}

svg {
  position: absolute;
  bottom: 0;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #f5a962;
  position: absolute;
  bottom: 0;
}

And this HTML structure:

<div class="header-container">
  <div class="header-top">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#F5A962" fill-opacity="1" d="M0,192L48,192C96,192,192,192,288,186.7C384,181,480,171,576,192C672,213,768,267,864,261.3C960,256,1056,192,1152,176C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
  </div>

  <div class="header-bottom"></div>
</div>

Answer №4

* {
    margin: 0%;
    padding: 0%;
}

svg {
  position: absolute;
  top: 100px;
  left: 0;
}

.header-container {
    width: 100%;
    height: 1000px;
}

.header-top {
  width: 100%;
  height: 50%;
  background-color: #3C8DAD;
}

.header-bottom {
  width: 100%;
  height: 50%;
  background-color: #F5A962;
}

It seems like you're trying to achieve a specific layout with overlapping elements. I've created a sample on CodePen that demonstrates the desired effect: CodePen.

The challenge arises when HTML treats SVG like any other element and displays it in the order specified. To successfully overlap elements, you'll need to manipulate the CSS property `position`. In this case, setting it to `absolute` and defining the position allows for proper layering, especially when the container has a fixed height.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Heroku fails to recognize the fragments I have created

After successfully deploying my Spring application on Heroku, I encountered an issue when trying to test its functionality. A message appeared saying: Error resolving template "/fragments/head.html", template might not exist or might not be accessible by a ...

htmlspringspring-mvcherokuthymeleaf

Creating an illustration with HTML5 from an image

Is it possible to draw on an image by placing a canvas on top of it? I am familiar with drawing on a canvas, but I am facing an issue where clicking on the image does not trigger the canvas for drawing. How can I resolve this? This is how my HTML looks: ...

javascriptjqueryhtmlhtml5-canvas

Issue with Vue.js - Double curly braces not rendering data on the page

I've recently delved into the world of vue.js Strangely enough, the double curly braces syntax doesn't seem to be rendering for me. However, when I utilize the v-text directive, everything falls into place. Here's a snippet of my code: HTM ...

javascripthtmlvue.js

Adding a new element with Jquery when a dropdown option is selected

What is causing this issue to not function properly? <script> $(document).ready(function(){ $('#custom_field option').click(function(){ $('#custom_field_input').append('<tr><td></td> ...

phpjavascriptjqueryhtmlforms

I am looking to reposition the navbar span tag so that it appears beneath the icon, utilizing both HTML and CSS

I'm currently working on a navbar design with 5 items, each containing an icon and a span tag. However, I'm facing difficulties in aligning the span tag below the icon for all 5 items in the navbar. Despite my best efforts, I have been unable to ...

htmlcss

Is there a CSS selector that allows me to exclude the final two child elements?

Is there a way to apply bottom-border to certain div elements within their parent, excluding the last two? It's important to note that the number of child elements can vary: <div id="parent"> <div> One </div> <div> Tw ...

htmlcss

What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.1 ...

htmlcssangularjsangular-ui-bootstrap

Is there a way to toggle the visibility of a textarea with a button using knockout and the foreach binding?

Knockout is new to me and I have encountered an issue. I am trying to create a button and textarea for each project, with the textarea initially hidden on page load. When the button is clicked, it should toggle the visibility of the corresponding textarea. ...

javascriptjqueryhtmlknockout.js

Aligning Bandcamp and Reverbnation iframes and DIVs to the center

[edit 3] - I am facing some trouble with the display of this code on Chrome, Sea Monkey, and Firefox. How can I fix this issue? <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"> <title>Pissi ...

iframehtmlcoding-stylecenter

Disable body scrolling on mobile devices in native browsers

When using the native browser on Samsung Galaxy S5 / S6, the following CSS code: body { overflow: hidden; } does not successfully prevent the body from scrolling. Is there a way to work around this issue? Edit: As mentioned below, one workaround is t ...

javascriptandroidjqueryhtmlcss

Enhance your website's accessibility by using JavaScript to allow the down and up arrow keys to function

Thank you for taking the time to read this, any feedback is greatly appreciated. The current script on my website is only partially functional (click "i" in the bottom right corner). Currently, the script will focus on the first link AFTER pressing the T ...

javascriptjqueryhtmlaccessibility

Preserving form input after an unsuccessful submission: A simple guide

As a beginner in the coding world, I am currently working on creating a contact form using PHP. One of the features I've included is a reCaptcha that must be checked before submitting the form. However, if the user forgets to check the reCaptcha and h ...

phphtmlcssajax

JavaScript time zone error specific to Internet Explorer

In my code, I am attempting to retrieve the timezone name or ID based on the client's local time. When testing with clients from the United States, I correctly receive EDT. However, when trying the same code with clients in the Indian timezone, it ret ...

javascripthtmlinternet-explorerdatetimetimezone

How can I dynamically update a <ul> list with AngularJS when a button is clicked or user inputs something?

For those interested, I have created a JSFiddle that can be viewed here I am trying to find a solution to retrieve user input (filename) from the input box and add it as an item in a list within the <ul>. I attempted to use a .push directive alongsi ...

htmlangularjs-directiveangular-ngmodel

Encountering difficulties with image processing on a web page

Recently, I've been experimenting with uploading an image and converting it to a grayscale version on my webpage. Oddly enough, the javascript code works perfectly when tested locally but fails to generate the grayscale image once integrated onto the ...

javascripthtmlimage-processing

Is there a way to prevent text flipping using CSS or jQuery?

Is there a way to prevent the contents of an object from flipping when it is rotated +180°? I want to keep everything inside readable and avoid any flipping effects. ...

csstextrotationflip

Slider fade animation not functioning as expected

Why won't the last slide display? How can I ensure that the first image is shown immediately after the side loads, without any delay? I've attempted various solutions but always encountered issues (such as displaying two images simultaneously) an ...

javascriptjqueryhtmlcss

Tips for controlling image sizes on larger devices while maintaining the appearance on Retina displays

I've been searching on the internet, but I got lost in complex explanations. I thought maybe someone here could help me out. :) I have a website with both mobile and desktop versions. Most of it looks good on different devices but there are some elem ...

cssmedia-queriesretina-display

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

htmlcsslayoutpositioningabsolute

Bootstrap 4 and Flex just can't seem to nail this down

Hi there, I'm in need of some assistance with a seemingly simple task that I've been struggling with for hours. https://i.sstatic.net/6J6G7.png I'm trying to create a 3 column layout where the images with varying heights align at the botto ...

htmlcssbootstrap-4