如何使用CSS的clip-path属性实现带有特殊形状的卡片样式？-css教程-PHP中文网

如何使用CSS的clip-path属性实现带有特殊形状的卡片样式？

DDD

发布： 2025-03-16 08:08:14

原创

466人浏览过

如何使用css实现复杂的卡片样式？

在设计网页时，经常会遇到需要实现一些复杂的卡片样式的情况。今天我们将探讨如何使用css的clip-path属性来实现一个带有特殊形状的卡片样式。

问题背景

假设我们需要实现一个类似下图所示的卡片样式：

![预览设计图]

这个卡片样式有几个难点，主要集中在卡片顶部的特殊形状和右上角的标签位置。

实现方法

为了实现这样的卡片样式，我们可以使用css的clip-path属性，并通过path命令来定义卡片的形状。path命令类似于svg中的路径命令，主要包括移动（m）、划线（l）、椭圆曲线（a）和闭合（z）等命令。

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

以下是实现这个卡片样式的css代码：

<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>

登录后复制

在这个实现中，.card类使用了clip-path属性来定义卡片的特殊形状。具体的path命令如下：