1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-23 18:56:29 +02:00

feat: Three dimensions card

This commit is contained in:
Phuoc Nguyen
2022-09-20 08:43:26 +07:00
parent b9a3335af9
commit f14eac7023
7 changed files with 119 additions and 151 deletions

View File

@@ -53,6 +53,7 @@
@import './patterns/statistic';
@import './patterns/status-light';
@import './patterns/teardrop';
@import './patterns/three-dimensions-card';
@import './patterns/triangle-buttons';
@import './patterns/video-background';
@import './patterns/voting';

View File

@@ -0,0 +1,46 @@
:root {
--three-dimensions-card-left-side-width: 1rem;
}
.three-dimensions-card {
position: relative;
/* Demo */
border: 1px solid #d1d5db;
height: 6rem;
width: 6rem;
}
/* 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%;
}