I want to make corner like in this image
I am a beginner to frontend development. I tried this but i'm stuck now.
The Code:
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: white;
border-radius: 15px
}
.box {
text-align: center;
font-size: 50pt;
}
#top {
background-color: blue;
position: relative;
border-bottom-left-radius: 50px
}
#top:after {
content: "";
position: absolute;
right: 0;
top: 100%;
height: 100px;
width: 100px;
border-top-right-radius: 50%;
box-shadow: 0 -50px 0 0 black;
}
#bottom {
background-color: red;
position: relative;
}
<div class="container">
<div class="box" id="top">Top</div>
<div class="box" id="bottom">Bottom</div>
</div>
This HTML and CSS code defines a webpage with a centered container containing two boxes, one with a blue background ("Top") and a decorative shadow, and the other with a red background ("Bottom"). The styling includes rounded corners and a centered text.
I would just add additional containers around the top and bottom ones to set the opposite background-color
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: white;
border-radius: 15px
}
.box {
text-align: center;
font-size: 50pt;
}
#OuterTop {
background-color: red;
}
#OuterBottom {
background-color: blue;
}
#top {
background-color: blue;
position: relative;
border-bottom-left-radius: 50px;
}
#bottom {
background-color: red;
border-top-right-radius: 50px;
position: relative;
}
<div class="container">
<div id="OuterTop">
<div class="box" id="top">Top</div>
</div>
<div id="OuterBottom">
<div class="box" id="bottom">Bottom</div>
</div>
</div>