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:
@@ -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';
|
||||
|
46
styles/patterns/_three-dimensions-card.scss
Normal file
46
styles/patterns/_three-dimensions-card.scss
Normal 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%;
|
||||
}
|
Reference in New Issue
Block a user