这种形状的图形一般很多 所以可以考虑把它封装成一个组件 只需要改变渐变的颜色 和 内容的文字即可！
实现示例图
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
box-sizing: border-box;
position: absolute;
width: 201px;
height: 420px;
background: linear-gradient(180deg, #6ED2F8 0%, #4F98DE 100%);
border: none;
}
#d1:after{
content: "";
position: absolute;
top: 420px;
width: 100%;
height: 80px;
background: linear-gradient(
180deg,
rgba(188, 233, 250, 1),
rgba(188, 233, 250, 0.551724),
rgba(245, 252, 254, 0.551724)
);
z-index: -1;
}
#d2{
height: 48px;
font-weight: 400;
font-size: 40px;
line-height: 48px;
text-align: center;
color: #FFFFFF;
}
#d3{
height: 96px;
font-weight: 400;
font-size: 40px;
line-height: 48px;
text-align: center;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="d1">
<p id="d2">05</p>
<p id="d3">
DEA<br>
技术支持
</p>
</div>
</body>
</html>
|
