mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-26 11:16:11 +01:00
Code Issues Releases Wiki Activity

feat: Three dimensions card

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

46
styles/patterns/_three-dimensions-card.scss Normal file
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%;
}