<div class="card-container">
  
  <h1>CSS Credit Cards</h1>
  
  <div class="card visa">
    <p>VISA</p>
  </div>
  
  <div class="card mc">
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <p>MasterCard</p>
  </div>
  
  <div class="card amex">
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <hr/>
    <svg class='svg' height="100%" width="100%">
      <text x="9%" y="45%" fill="none" stroke="#fff">AMERICAN</text>
    </svg>
    <svg class='svg' height="100%" width="100%">
      <text x="23%" y="75%" fill="none" stroke="#fff">EXPRESS</text>
    </svg>
  </div>
  
  <div class="card discover">
    <p>Discover</p>
  </div>
  
  <div class="card back"><span></span></div>
</div>
//colors
$blue: #263238;
$blue-light: lighten(#263238, 20%);

//fonts
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400);
@import url(https://fonts.googleapis.com/css?family=Bevan);

//Font declarations
$roboto: 'Roboto', sans-serif;
$sans: 'Open Sans', sans-serif;
$bevan: 'Bevan', cursive;

//Z-index
$zBottom: 0;
$zMiddle: 200;
$zTop: 600;

html,
body {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

*,
*:before,
*:after { box-sizing: inherit; }

body {
    display: table;
    background: #333;
    font-size: 100%; 
    font-family: $roboto;
    font-weight: normal;
    padding: .75em;
}

.card-container {
    background-image: radial-gradient($blue-light, $blue);
    border-radius: 0.9375em;
    display: table-cell;
    font-size: .3rem;
    height: 100%;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  
    @media(min-width: 25.625em) { font-size: .4rem; }

    @media(min-width: 47.5em) { font-size: .75rem; }

    @media(min-width: 60.625em) { font-size: 1rem; }
}

h1 {
    color: #fff;
    font-family: $bevan;
    font-size: 4.75em;
    font-weight: normal;
    margin: 0 0 .5em;  
    text-align: center;
    text-shadow: 0.013em 0.039em 0.132em rgba(0, 0, 0, .6);
    text-transform: uppercase;
}

///////////////////////
//card common styles
/////////////////////
.card {
    background: #fff;
    border-radius: 0.25em;
    box-shadow: 0 0.039em 0.132em rgba(0, 0, 0, .4);
    display: inline-block;
    font-size: 1em;
    height: 3em; 
    overflow: hidden;
    position: relative;
    margin-right: 1em;
    vertical-align: middle;
    width: 5em;

    &:nth-of-type(5) { margin-right: 0; }
}

///////////////
//visa
//////////////

$blue-visa: #00579F;
$yellow-visa: #FBA31B;

.visa {
    font-family: $sans; 
    font-size: 2em;
    font-style: italic; 
    font-weight: 800;
    padding: .05em;
    z-index: $zBottom; 
    //blue and yellow stripe
    &:before,
    &:after {
        background: $blue-visa;
        border-top-left-radius: 0.25em;
        border-top-right-radius: 0.25em;
        content: "";
        display: block;
        height: .75em;
        left: 50%;
        position: absolute;
        top: 1.75%;
        transform: translate(-50%, 0);
        width: 96%;
        z-index: $zMiddle;
    }
    //push yellow down
    &:after {
        background: $yellow-visa;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0.25em;
        border-bottom-right-radius: 0.25em;
        bottom: 1.75%;
        top: auto;
    }
    //visa letters
    p { 
        color: $blue-visa;
        line-height: 3em; 
        position: relative;

        //yellow swoosh
        &:after {
              border-top: .1em solid transparent;
              border-bottom: .1em solid transparent;
              border-left: .4em solid $yellow-visa;
              border-radius: 0.0625em; 
              content: "";
              display: block;
              height: 0; 
              left: 25.5%;
              position: absolute;
              top: 37.25%;
              transform: rotateZ(189deg);
              width: 0; 
              z-index: $zTop;
        }
    }
}



///////////////
// MasterCard
//////////////

$red-mc: #EF3526;
$yellow-mc: #FCB836;
$blue-mc: #0059B3;

.mc {
    background: $blue-mc;
    font-size: 2em;
  
    &:before,
    &:after {
        background: $red-mc;
        border-radius: 50%;
        content: "";
        display: block;
        height: 2em;
        left: 35%; 
        position: absolute;
        top: 50%;
        width: 2em;
        transform: translate(-50%, -50%);
        z-index: $zMiddle;
    }

    &:after {
        background: $yellow-mc;
        left: 65%;
    }
  
    hr {
        background: $red-mc;
        border: none;
        border-top-right-radius: 0.25em;
        height: .14em; 
        margin: .14em auto;
        position: relative;
        top: 25%;
        width: .65em; 
        z-index: $zTop;

        &:nth-of-type(1),
        &:nth-of-type(5) { transform: translate(-28%, 0);  }
        
        &:nth-of-type(2),
        &:nth-of-type(4){ transform: translate(-10%, 0);  }

        &:nth-of-type(4),
        &:nth-of-type(5) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0.25em;
        }

        &:nth-of-type(3) {
            border-top-right-radius: 4;
            border-bottom-right-radius: 0.25em;
        }
    }

    p {
        color: #fff;
        font-size: .63em;
        font-weight: 600;
        line-height: 1.5em; 
        position: relative;
        text-shadow: 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 1);
        top: -.8em;
        z-index: $zTop;
    }
}


///////////////
// AMEX
//////////////
$blue-light-AMEX: rgba(126,205,242,1);
$blue-dark-AMEX: rgba(9,113,188,1);
  
.amex {
    background: $blue-dark-AMEX;
    background-image: radial-gradient(top left, circle farthest-corner, $blue-light-AMEX, $blue-dark-AMEX 60%); 
    font-size: 2em;
    font-weight: 900; 
  
    hr {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, .05);
        margin: .15em 0;
    }
  
    .svg {
        color: #FFF; 
        font-size: .8em;
        left: 0;
        position: absolute;
        top: 0;
        stroke-width: 1;
    }
}


///////////////
// Discover
//////////////
$orange-disc: #FF7800;
.discover {
    font-size: 2em;

    &:after {
        border-top: .75em solid transparent;
        border-bottom: 0 solid transparent;
        border-right: 1.75em solid $orange-disc;
        bottom: 0;
        content:"";
        height: 0;
        position: absolute;
        right: 0;
        width: 0;
    }

    p {
        font-size: .75em;
        font-weight: bold;
        letter-spacing: .0625em;
        line-height: 4em;
        position: relative;
        text-transform: uppercase;

        &:after {
            background: $orange-disc;
            border-radius: 50%;
            content: "";
            display: block;
            height: .85em;
            left: 3.11em;
            position: absolute;
            top: 1.5em;
            width: .85em;

            @media(min-width: 25.625em) { 
                top: 1.59em;
            }
        }

    }
}

///////////////
// Back
//////////////
.back {
    background: #ccc;
    font-size: 2em;
    padding: .5em .12em;

    &:before {
        background: #333;
        content: "";
        display: block;
        height: .6em;
        width: 100%;
    }

    &:after {
        background: #333;
        border: 0.2em solid #fff;
        content: "";
        display: block;
        height: .55em;
        margin-left: 0.2em;
        margin-top: 0.28em;
        width: 55%;
    }

    span {
        background: #333;
        border: 0.15em solid #fff;
        display: block;
        height: .43em;
        margin-left: .2em;
        margin-top: .5em;
        position: absolute;
        right: .65em;
        top: 0.95em;
        width: .55em;
        z-index: $zBottom;

        &:before { 
            border: 0.15em solid red;
            border-radius: 50%;
            content: "";
            height: .95em;
            left: -0.35em;
            position: absolute;
            top: -0.4em;
            width: .95em;
            z-index: $zTop;
        }
    }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js