我想像这张图片一样制作角落
我是前端开发的初学者。我尝试过,但现在卡住了。
代码:
* {
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>
此 HTML 和 CSS 代码定义了一个网页,该网页具有一个居中容器,其中包含两个框,一个具有蓝色背景(“顶部”)和装饰性阴影,另一个具有红色背景(“底部”)。样式包括圆角和居中文本。
我只是在顶部和底部周围添加额外的容器来设置相反的背景颜色
* {
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>