如何利用css编写复杂的卡片样式？
你提供了设计图和样式难点，要求帮助编写css。
对于设计图中的形状，可以使用clip-path中的路径命令（与svg路径命令相同）来实现。
以下是示例实现：
立即学习“前端免费学习笔记（深入）”；
.card {
clip-path: path("m 215, 8 a 10 10 90 0 0 205 0 l 0 0 l 0 150 l 300 150 l 300 40 a 10 10 90 0 0 290 30 l 230 30 a 10 10 90 0 1 220 22 z");
}路径命令中的m是移动，l是划线，a是椭圆曲线，z是闭合。
完整代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<style>
body {
background-color: rgb(233, 230, 230);
}
.container{
position: relative;
width: 300px;
height: 150px;
}
.card {
width: 100%;
height: 100%;
border-radius: 10px;
background-color: white;
clip-path: path("M 215, 8 A 10 10 90 0 0 205 0 L 0 0 L 0 150 L 300 150 L 300 40 A 10 10 90 0 0 290 30 L 230 30 A 10 10 90 0 1 220 22 z");
z-index: 1;
position: relative;
}
.tag {
width: 90px;
height: 30px;
border-top-right-radius: 10px;
background-color: red;
color: white;
position: absolute;
right: 0;
top: 5px;
z-index: 0;
text-align: center;
}
.title {
font-size: 18px;
font-weight: bold;
padding: 10px;
}
.content {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="title">产品生产填报</div>
<div class="content">
内容
</div>
</div>
<div class="tag">未完成</div>
</div>
</body>
</html>以上就是如何使用CSS实现复杂卡片形状？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
344
