最近写页面的时候，需要写一个
弧形卡片的样式，这个卡片中还要放图片和文字，所以肯定不能贴个图就完事了，只能用css来写，效果如下图
自己没写出来，请教了前端高手，完整代码如下（代码有删减，实际业务的html结构要复杂很多）：
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弧形卡片</title>
<style>
* {
margin: 0;
}
.header {
overflow: hidden;
}
.outer {
position: relative;
padding: 20px 0;
background: linear-gradient(to right, rgb(34, 92, 166), rgb(82, 191, 224));
border-radius: 0 0 50% 50%;
width: 140%;
left: -20%;
overflow: hidden;
}
.inner {
width: 90vw;
margin: 0 auto;
background-color: rgb(233, 186, 93);
margin-top: 30px;
margin-bottom: -20px;
padding-bottom: 20px;
}
.detail{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<div class="header">
<div class="outer">
<div class="inner">
<div class="detail">
<h3>内容</h3>
<h3>内容</h3>
<h3>内容</h3>
<h3>内容</h3>
</div>
</div>
</div>
</div>
</body>
</html>
