A Pen by Keith Raymond.

HTML-CSS-Playing-card.markdown

HTML/CSS Playing card

A Pen by Keith Raymond on CodePen.

License.

index.haml

.container.cf
  .card
    .number 
      %span 2
      .heart
        .circle
        .circle
        .triangle
  
    .heart.center
      .circle
      .circle
      .triangle
      
    .heart.center.bottom
      .circle
      .circle
      .triangle
  
    .number.bottom
      %span 2
      .heart
        .circle
        .circle
        .triangle
        
  .card
    .number 
      %span 2
      .spade
        .spade-top
          .circle
          .circle
          .triangle
        .spade-bottom
          .circle
          .circle
          .bar
  
    .spade.center
      .spade-top
        .circle
        .circle
        .triangle
      .spade-bottom
        .circle
        .circle
        .bar
      
    .spade.center.bottom
      .spade-top
        .circle
        .circle
        .triangle
      .spade-bottom
        .circle
        .circle
        .bar
  
    .number.bottom
      %span 2
      .spade
        .spade-top
          .circle
          .circle
          .triangle
        .spade-bottom
          .circle
          .circle
          .bar
  .card
    .number
      %span 2
      .club
        .club-top
          .circle
          .circle
          .circle
        .club-bottom
          .circle
          .circle
          .bar
          
    .club.center
      .club-top
        .circle
        .circle
        .circle
      .club-bottom
        .circle
        .circle
        .bar
        
    .club.center.bottom
      .club-top
        .circle
        .circle
        .circle
      .club-bottom
        .circle
        .circle
        .bar
        
    .number.bottom
      %span 2
      .club
        .club-top
          .circle
          .circle
          .circle
        .club-bottom
          .circle
          .circle
          .bar
          
  .card
    .number
      %span 2
      .diamond
        .triangle
        .triangle
        
    .diamond.center
      .triangle
      .triangle
      
    .diamond.center.bottom
      .triangle
      .triangle
      
    .number.bottom
      %span 2
      .diamond
        .triangle
        .triangle

style.scss

@import "compass";
body { background: #888; }

.cf {
  *zoom: 1;
  &:before,
  &:after { content: " "; display: table; }
  &:after { clear: both; }
}

.container {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  background: #050;
  .card {
    float: left;
    position: relative;
    width: 160px;
    height: 200px;
    margin: 40px 20px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
    box-shadow: 0 0 10px rgba(#000, 0.5);
  }
}

.heart, .diamond {
  .circle, .block { background-color: #900; }
  .triangle { border-top: 18px solid #900; } 
  span { color: #900; } 
}

.spade, .club {
  .circle, .block { background-color: #000; }
  .triangle { border-top: 18px solid #000; } 
  span { color: #000; } 
}

.number {
  position: absolute;
  top: 5px;
  left: 5px;
  span { 
    font-size: 16px;
    padding: 0 10px;
  }
  .heart, .spade, .club, .diamond {
    -webkit-transform: scale(0.65);
    transform: scale(0.65); 
  }
  &.bottom {
    top: auto;
    bottom: 5px;
    left: auto;
    right: 5px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.heart, .spade, .club, .diamond { 
  position: relative; 
  width: 30px;
  height: 30px;
}

.center {
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -15px;
  &.bottom {
    top: auto;
    bottom: 10px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.heart, .spade {
  .circle {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    &:first-child { left: 0; }
    &:nth-child(2) { right: 0; }
  }
  .triangle { 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
	    height: 0; 
	    border: {
      left: 15px solid transparent;
	      right: 15px solid transparent;
    }
  }
}
.heart .circle { top: 0; }
.spade {
  .spade-top {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0.6) rotate(180deg);
    transform: scale(0.6) rotate(180deg);
  }
  .spade-bottom {
    .circle {
      top: auto;
      bottom: 0;
      z-index: 2;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background: #fff;
      &:first-child { left: 4px; }
      &:nth-child(2) { right: 4px; }
    }
    .bar {
      position: absolute;
      bottom: -1px;
      left: 50%;
      margin-left: -5px;
      width: 10px;
      height: 12px;
      background: #000;
    }
  }
}

.club {
  .club-top {
    position: relative;
    height: 24px;
    z-index: 10;
    .circle {
      position: absolute;
      width: 12px;
      height: 12px;
      background-color: #000;
      border-radius: 6px;
      &:first-child {
        left: 50%;
        margin-left: -6px;
      }
      &:nth-child(2), 
      &:last-child { 
        bottom: 1px;
      }
      &:nth-child(2) { left: 1px; }
      &:last-child { right: 1px; }
    }
  }
  .club-bottom {
    position: relative;
    .bar {
      position: absolute;
      background: #000;
      width: 16px;
      height: 18px;
      top: -13px;
      left: 50%;
      margin-left: -8px;
    }
    .circle {
      position: absolute;
      top: -16px;
      z-index: 2;
      width: 18px;
      height: 18px;
      border-radius: 10px;
      background: #fff;
      &:first-child { left: -5px; }
      &:nth-child(2) { right: -5px; }
    }
  }
}

.diamond {
  margin-top: -15px;
  .triangle {
    border: {
      top: 17px solid #900;
      right: 14px solid transparent;
      left: 14px solid transparent;
    }
    &:first-child {
      border: { 
        top: 17px solid transparent;
        bottom: 17px solid #900;
      }
    }
  }
}