需要把以下样式编写出来，请教大佬们css怎么写出（难点）下列样式预览设计图难点（我不会的地方）提前谢谢各位大佬啦，大佬们发大财哈！

可以利用径向渐变结合定位以及圆角来还有层叠属性来综合实现。参考 demo 。不过推荐还是使用切图的方式来实现，用css实现太复杂了。需要注意不同的状态可以根据状态名来添加样式示例如下: /*完成状态*/ .card-title-status-success { color: #fff; background-color: #4ae74f; } /*未完成状态*/ .card-title-status-fail { color: #fff; background-color: red; }

请教复杂的卡片样式css编写？

可以clip-path的path路径来实现这种形状。path路径和SVG的路径命令一样。

以下是一个供参考的实现。

效果如图：

实现的关键是那个clip-path剪切路径。其中路径命令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编写？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

solidjs中如何实现vue中的keep-alive功能？

vue项目如何在初始化之前跳转外部页面？

react 18 的自动批量更新为何失效？

js如何控制移动端overflow:scroll容器滑动的最大速度？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

前端代码更新如何通知用户刷新页面？