请教复杂的卡片样式css编写？-灵析社区

可以clip-path的path路径来实现这种形状。path路径和SVG的路径命令一样。 以下是一个供参考的实现。 效果如图：  实现的关键是那个clip-path剪切路径。其中路径命令M是移动，L是划线，A是椭圆曲线，z是闭合。 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; } 产品生产填报 内容 未完成