效果展示：
这个案例比较简单：
就先分析一下这个结构吧：
值得一提的是，这个案例中的文字段落是使用lorem功能自动生成的，关于lorem功能的介绍参考这篇文章。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css Weird Shape</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="icon">
<ion-icon name="earth-outline"></ion-icon>
</div>
<div class="content">
<h2>Card One</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero dolor iusto sed ipsam quos illo aspernatur ex ea eveniet distinctio? Sed ipsam numquam ducimus ipsa architecto vero, cumque quos mollitia.</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="diamond-outline"></ion-icon>
</div>
<div class="content">
<h2>Card Two</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero dolor iusto sed ipsam quos illo aspernatur ex ea eveniet distinctio? Sed ipsam numquam ducimus ipsa architecto vero, cumque quos mollitia.</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="rocket-outline"></ion-icon>
</div>
<div class="content">
<h2>Card Three</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero dolor iusto sed ipsam quos illo aspernatur ex ea eveniet distinctio? Sed ipsam numquam ducimus ipsa architecto vero, cumque quos mollitia.</p>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
css：
@import url("https://fonts.googleapis.com/css2?family=Ubantu:wght@300;400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Ubantu", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3c2846;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px;
}
.card {
position: relative;
width: 320px;
height: 450px;
margin: 30px;
background: #287bff;
border-radius: 20px;
border-bottom-left-radius: 160px;
border-bottom-right-radius: 160px;
box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25),
0 45px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
}
.card::before {
content: "";
position: absolute;
top: -140px;
left: -40%;
width: 100%;
height: 120%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
transform: rotate(35deg);
pointer-events: none;
filter: blur(5px);
}
.card:nth-child(1) {
background: linear-gradient(to bottom, #ff2ae0, #645bf6);
}
.card:nth-child(2) {
background: linear-gradient(to bottom, #ffec61, #f321d7);
}
.card:nth-child(3) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.icon {
position: relative;
width: 140px;
height: 120px;
background: #3c2846;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0#fff;
z-index: 1000;
display: flex;
justify-content: center;
}
.icon::before {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 50px;
border-top-right-radius: 50px;
box-shadow: 15px -15px 0 15px #3c2846;
}
.icon::after {
content: "";
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 50px;
border-top-left-radius: 50px;
box-shadow: -15px -15px 0 15px #3c2846;
}
.icon ion-icon {
color: #fff;
font-size: 6em;
z-index: 10000;
--ionicon-stroke-width: 24px;
}
.content {
position: absolute;
width: 100%;
padding: 30px;
padding-top: 140px;
text-align: center;
}
.content h2 {
font-size: 1.75em;
color: #fff;
margin-bottom: 10px;
}
.content p {
color: #fff;
line-height: 1.5em;
}