Filling in the outer section after the border-CodePudding

I just started learning HTML and CSS. I have this div element in my html page

<div >
            <h1>STACK OVERFLOW</h1>
            <p>TESTING</p>
    </div>

I created a curve border for this element using this CSS line:

.headcontainer {
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
justify-content: center;
height: 500px;
width: 100%;
background: #bdc3c7;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);  / Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2c3e50, #bdc3c7); / W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
border-radius: 0 0 75% 75% / 30%;}

I want to fill the white area outside the curve border with different color.

How can I do that?

I try and do this on codepen -> https://codepen.io/Grooks/pen/dyJVmdq

I try to fill the background color using

*{
background: black;
}

But it also replace my header and the background of my h1 and P element.

CodePudding user response：

Put .headcontainer in a container set containers background property

*{
  margin: 0;
  padding: 0;
} 

.headcontainer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative; 
    justify-content: center;
    height: 500px;
    width: 100%;
    background: #bdc3c7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2c3e50,     #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
    border-radius: 0 0 75% 75% / 30%;
}

.container{
  background:red;

}

<div >
<div >
            <h1>STACK OVERFLOW</h1>
            <p>TESTING</p>
 </div>

</div>

CodePudding user response：

Apply box shadow box-shadow: 0px 0px 0px 200px #000; to the headcontainer class it will fill extra space with color.