<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.