CSS Card Design

Here’s a simple HTML CSS card design example with an image shape changed using the CSS clip-path property.

Final Output:

Card Title

Some description about this card you don’t need to read.

1. Add a div with a class card. Add your image, title, and description using the following HTML structure.

<div class="card">
    <img src="..." alt="">
    <div class="description">
        <h2>Card Title</h2>
        <p>Some description about this card you don't need to read.</p>
        <button>Know More</button>
    </div>
</div>

Set some max-width for the card and image.

.card{
  max-width: 20em;
}
img {
  max-width: 100%;
}

Output:

Card Title

Some description about this card you don’t need to read.

2. Set text-align to center to align all card elements to the center. And set a box shadow or a border for the card.

.card{
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

Button styling:

button {
  font-size: 1em;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #836953;
  border: none;
}

Output:

Card Title

Some description about this card you don’t need to read.

3. To get the image’s slanted edge, use the CSS clip-path property.

Clip path will only display the part inside the region you define.

We’ll be using the polygon function here. How it works is, you can define the position of the image corners, like plotting points on graph paper using the x and y coordinates.

So the top-left corner is 0 0, the bottom-left is 0 100%, the bottom-right is 100% 85%, and the top-right is 100% 0%.

img {
  clip-path: polygon(0 0, 0% 100%, 100% 85%, 100% 0%);
}

Add some padding to the description.

.description {
  padding: 1em 2em 1.5em;
}

Output:

Card Title

Some description about this card you don’t need to read.

Final Output Code for CSS card design example:

HTML:

<div class="card">
    <img src="..." alt="">
    <div class="description">
        <h2>Card Title</h2>
        <p>Some description about this card you don't need to read.</p>
        <button>Know More</button>
    </div>
</div>

CSS:

.card {
  max-width: 20em;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.card img {
  max-width: 100%;
  clip-path: polygon(0 0, 0% 100%, 100% 85%, 100% 0%);
}
.card button {
  font-size: 1em;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #836953;
  border: none;
}
.card .description {
  padding: 1em 2em 1.5em;
}