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

横刀立马007

需要把以下样式编写出来,请教大佬们css怎么写出(难点)下列样式 预览设计图 ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/d286cc0272cf20b7d32c547806b5943b.png) 难点(我不会的地方) ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/a13b83a1f5423a0afdbda83f59265628.png) 提前谢谢各位大佬啦,大佬们发大财哈!

阅读量:21

点赞量:0

问AI
可以clip-path的path路径来实现这种形状。path路径和SVG的路径命令一样。 以下是一个供参考的实现。 效果如图: "卡片" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241130/6f46be3af27023877d157f4c0552663f.png) 实现的关键是那个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; } 产品生产填报 内容 未完成