GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Stacked cards

HTML

<div class="stacked-cards">
<!-- Repeat if you want to have more cards -->
<div class="stacked-cards__card"></div>

<!-- Main card's content -->
...
</div>

CSS

.stacked-cards {
/* Used to position the stacked cards */
position: relative;

border: 1px solid #d1d5db;
border-radius: 0.25rem;
}

.stacked-cards__card {
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;

/* Take full size */
height: 100%;
width: 100%;

/* Displayed under the container */
z-index: 1;

/* Background and border colors */
background-color: rgb(255, 255, 255);
border: 1px solid #d1d5db;

/* Rotate it. Change the number of degrees for the following cards */
transform: rotate(5deg);
}
Demo
Follow me on and to get more useful contents.