How to create complex card styles using CSS' clip-path property?

Cleverly use CSS to create personalized cards: breaking through the limitations of conventional shapes

In web design, cards are commonly used layout elements. This article will explore in-depth how to use CSS, especially the clip-path attribute, to create unique card styles, and solve complex shape design problems that are difficult to achieve by conventional methods.

Design Challenge: Irregular Card Shapes

Many designers will encounter this situation: the card shape in the design draft is irregular and difficult to implement with simple CSS attributes. This article will provide a solution to help you easily implement these complicated shapes of cards.

Solution: clip-path attribute and path syntax

clip-path property is a powerful tool in CSS that allows you to clip elements with various shapes. Combined with path syntax, we can accurately control the shape of the card.

The path syntax contains a series of commands, such as:

• M : Move to the specified coordinates
• L : Draw a line to the specified coordinate
• A : Draw an elliptical arc
• Z : Close the path

Here is an example showing how to create irregular cards using clip-path :

(There should be a rendering picture here)

Here is the complete HTML and CSS code:

 


  <meta charset="utf-8">
  <style>
    body {
      background-color: #e9e6e6;
    }

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


  <div class="container">
    <div class="card">
      <div class="title">Product production report</div>
      <div class="content">content</div>
    </div>
    <div class="tag">Not completed</div>
  </div>

This code creates an irregular card with concave and rounded corners through clip-path attribute and precise path definition, and adds title, content, and status tags. You can adjust the path commands according to the actual design to achieve various complex card shapes.

The above is the detailed content of How to create complex card styles using CSS' clip-path property?. For more information, please follow other related articles on the PHP Chinese website!