<div class="cb-container">
<span class="type">Debit Card</span>
<span class="brand">VISA</span>
<span class="amount">$ 1560.00</span>
<span class="owner">Jeremy Mathew</span>
<span class="chip"></span>
<span class="numbers">58253242</span>
</div>
.cb-container {
position: relative;
width: 325px;
height: 175px;
padding: 25px;
border-radius: 22px;
&:before {
content: ''; /* Pour que ton pseudo élément existe */
display: flex; /* Par défaut c'est block normalement mais c'est tj utile d'avoir un flex. De plus spécifier le display résous des pb de compat' */
z-index: -1;
position: absolute; /* Pour que sa position soit relative à son parent, qui doit lui même être en relative */
top: 0;
right: 0;
bottom: 0;
left: 0; /* Positionnement relative au parent, tj dans le sens des aiguilles d'une montre et permet de l'étirer à la même taille que son parent*/
transform: rotateZ(7deg);
background: red;
border-radius: inherit;
}
&:after {
content: ''; /* Pour que ton pseudo élément existe */
display: flex; /* Par défaut c'est block normalement mais c'est tj utile d'avoir un flex. De plus spécifier le display résous des pb de compat' */
z-index: -1;
position: absolute; /* Pour que sa position soit relative à son parent, qui doit lui même être en relative */
top: 0;
right: 0;
bottom: 0;
left: 0; /* Positionnement relative au parent, tj dans le sens des aiguilles d'une montre et permet de l'étirer à la même taille que son parent*/
background-color: rgba(255, 165, 0, 1);
border-radius: inherit;
}
.type {
color: white;
}
.brand {
position: absolute;
top: 25px;
right: 25px;
color: white;
}
.amount {
position: absolute;
bottom: calc(50px + 1rem);
left: 25px;
color: white;
}
.owner {
position: absolute;
bottom: 25px;
left: 25px;
color: white;
}
.chip {
position: absolute;
bottom: calc(50px + 1rem);
right: 25px;
}
.numbers {
position: absolute;
bottom: 25px;
right: 25px;
color: white;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.