Three dimensions card

HTML

<div class="three-dimensions-card">...</div>

CSS

:root {
    --three-dimensions-card-left-side-width: 1rem;
}

.three-dimensions-card {
    position: relative;
}

/* The left side */
.three-dimensions-card::before {
    background: #d1d5db;
    content: '';

    /* Position */
    top: var(--three-dimensions-card-left-side-width);
    left: 0px;
    position: absolute;
    transform: translate(-100%, 0) skewY(-45deg);
    transform-origin: left top;

    /* Size */
    height: 100%;
    width: var(--three-dimensions-card-left-side-width);
}

/* The bottom side */
.three-dimensions-card::after {
    background: #d1d5db;
    content: '';

    /* Position */
    bottom: 0px;
    left: 0px;
    position: absolute;
    transform: translate(0, 100%) skewX(-45deg);
    transform-origin: left top;

    /* Size */
    height: var(--three-dimensions-card-left-side-width);
    width: 100%;
}