其实之前i护理主页的原型是这样滴
然后由于时间问题+个人能力问题，所以最后是这样滴
后来我发现京东的主页好像也是这样的
看来试着弄弄还是有点必要滴
效果图：
源码：
我们需要先重置一下浏览器的样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
现在我们在body里面进行粗略的构建结构
<body>
<div class="content">
<div class="info">这是背景啦</div>
</div>
<ul class="menu">
<li>我的订单</li>
</ul>
</body>
接下来我们进行css样式的书写
.content {
height: 200px;
position: relative;
overflow: hidden;
}
使用伪元素::before
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
.content::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transform: scale(2);
transform-origin: bottom center;
border-radius: 0 0 200px 200px;
background-color: #96D596;
}
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
.content .info {
color: white;
position: relative;
z-index: 2;
}
全部源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 200px;
position: relative;
overflow: hidden;
}
.content::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
transform: scale(2);
transform-origin: bottom center;
border-radius: 0 0 200px 200px;
background-color: #96D596;
}
.content .info {
color: white;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="content">
<div class="info">这是背景啦</div>
</div>
<ul class="menu">
<li>我的订单</li>
</ul>
</body>
</html>
参考文章1：CSS3 box-sizing 属性
参考文章2：::before和::after伪元素的用法