如何使用CSS实现复杂卡片形状？-css教程-PHP中文网

如何使用CSS实现复杂卡片形状？

心靈之曲

发布： 2024-11-07 09:18:02

原创

461人浏览过

如何使用css实现复杂卡片形状？

如何利用css编写复杂的卡片样式？

你提供了设计图和样式难点，要求帮助编写css。

对于设计图中的形状，可以使用clip-path中的路径命令（与svg路径命令相同）来实现。

以下是示例实现：

立即学习“前端免费学习笔记（深入）”；

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

查看详情

.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中文网其它相关文章！