CSS3 cards

pique, cœur, trèfle, carreau

by toubia95

HTML

<div class="pique"></div>

<div class="coeur"></div>

<div class="trefle"><span class="trail"></span></div>

<div class="carreau"></div>

<div class="trefle2"></div>

CSS

@charset "UTF-8";

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 50px;
  font-size: 13px;
}


.pique {
margin-left: 75px;
margin-top: 0px;
float: left;
display: block;
border-color:black;
border-style:dotted;
border-width:40px 0 0 40px ;
width:0;
height:0;
-moz-transform:rotate(45deg);
position: relative;
}

.pique::after {
position: absolute;
display: block;
content:"";
width: 50px;
height: 50px;
background-image: -moz-linear-gradient(
  left top, 
  rgba(0,0,0,1) 20%, 
  rgba(255,255,255,0) 0%
  );
}

.coeur {
margin-left: 50px;
margin-top: 10px;
float: left;
display: block;
border-color:red;
border-style:dotted;
border-width:0 40px 40px 0;
width:0;
height:0;
-moz-transform:rotate(45deg); 
}

.trefle {
  margin-left: 50px;
  float: left;
  display: block;
  width: 38px;
  height: 38px;
  background:black;
  border-radius: 19px;
  position: relative;
  top: -10px;
}

.trefle::before, .trefle::after {
  content:"";
  position: absolute;
  display: block;
  width: 38px;
  height: 38px;
  background:black;
  border-radius: 19px;
  top: 22px
}

.trefle::before {
  left: -17px;
}

.trefle::after {
  left: 17px;
}

.trefle .trail {
  content:"";
  position: absolute;
  display: inline;
  top: 49px;
  left: 6px;
  border-bottom:21px solid black;
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
}

.carreau {
  margin-left: 50px;
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  background:red;
  -moz-transform:rotate(45deg); 
}


.trefle2 {
  margin-left: 50px;
  float: left;
  display: block;
  width: 38px;
  height: 38px;
  background:black;
  border-radius: 19px;
  position: relative;
  top: -10px;
}

.trefle2::before {
  content:"••";
  font-size: 100px;
  letter-spacing:-24px;
  position: absolute;
  display: block;
  width: 38px;
  height: 38px;
  background:transparent;
  top: -25px;
  left: -25px;
}

.trefle2::after {
  content:"";
  position: absolute;
  display:...