I'm working on a small webpage and I am trying to incorporate 2 shapes in the background (see design screenshot attached). Using CSS, I created these shapes but I am facing an issue where the bottom right shape keeps extending beyond the container, causing a scroll bar to appear. I attempted using ::before/::after for the parent container as well as separate DIVs in HTML, but I couldn't resolve the problem. I thought setting overflow property would help, but it didn't work as expected. Can anyone provide some guidance on how to fix this issue? Thank you!
body {
position: relative;
min-height: 100vh;
width: 100%;
padding: 10%;
}
.container {
width: 100%;
margin: 1.5rem 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
}
.background-one {
position: absolute;
top: 0;
left: -50%;
background: linear-gradient(to top, $violet, $magenta);
width: 375px;
height: 54%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
z-index: -1;
}
.background-two {
position: absolute;
bottom: 0;
right: -50%;
background: hsl(236, 72%, 63%);
width: 375px;
height: 54%;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
z-index: -1;
}<body>
<div class="background-one"></div>
<div class="background-two"></div>
<div class="container">
<div class="phone"></div>
</div>
</body>