I'm struggling with creating a corner like the one shown in the image.
As a beginner in frontend development, I attempted to write the following code but now I'm stuck.
The Snippet:
* {
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 demonstrates how to create a webpage with a centered container containing two boxes - one with a blue background labeled as "Top" with a decorative shadow, and the other with a red background marked as "Bottom". The design features rounded corners and centered text.