A Pen by Pawel

Thumbnail
This awesome code was written by Szczepkowski, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Szczepkowski ©
  • HTML
  • CSS
  • JavaScript
    <div class="suits">
  <div class="club">
    <div class="club-circle"></div>
    <div class="club-triangle"></div>    
  </div>
  <div class="heart">
    <div class="heart-triangle"></div>
  </div>
  <div class="spade">
    <div class="heart-triangle"></div>
    <div class="spade-triangle"></div>
  </div>
  <div class="diamond">
    <div class="diamond-rectangular"></div>    
  </div>
</div>


/*Downloaded from https://www.codeseek.co/Szczepkowski/a-pen-by-pawel-GogZbO */
    body {
  font-size: 5px;
}

.suits {
  display: flex;
}

.diamond, .spade, .club, .heart {
  width: 20em;
  height: 22.6em;
  overflow: hidden;
}

/* diamond symbol */

.diamond-rectangular {
  top: 11.3em;
  left: 2em;
  position: relative;
  width: 0;
  height: 0;
  border-bottom: transparent;
  border-top: 11em solid #3927FB;
  border-left: 8.5em solid transparent;
  border-right: 8.5em solid transparent;
}
.diamond-rectangular:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: transparent;
  border-bottom: 11em solid #3927FB;
  border-left: 8.5em solid transparent;
  border-right: 8.5em solid transparent;
  top: -22em;
  left: -8.5em;
  
}


/* spade symbol */

.spade .heart-triangle {
  transform: rotate(180deg) translateY(8.03em) scale(0.8);
  border-top: 16em solid #181515; 
}
.spade .heart-triangle:before, .spade .heart-triangle:after {
  border-left: 5em solid #181515;
  border-top: 5em solid #181515;
}

.spade-triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 8em solid #181515;
  transform: rotate(45deg);
  border-bottom: 8em solid transparent;
  left: 6em;
  top: 2.6em;
}


/* heart symbol */

.heart-triangle {
  position: relative;
  top: 6.56em;
  width: 0;
  height: 0;
  border-top: 16em solid #FF2020;
  border-left: 10em solid transparent;
  border-right: 10em solid transparent;
}
.heart .heart-triangle {
  transform: scale(0.93)
}

.heart-triangle:before, .heart-triangle:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  border-top: 5em solid #FF2020;
  border-bottom: 5em solid transparent;
  border-left: 5em solid #FF2020;
  border-right: 5em solid transparent;
  transform: rotate(45deg);
  border-radius: 100%;
  top: -22.6em;
}
.heart-triangle:before {
  left: -10em;
}

/* club symbol */

.club-circle {
  position: relative;
  width: 10em;
  height: 10em;
  background-color: #318533;
  left: 5em;
  border-radius: 100%;
}
.club-circle:before, .club-circle:after {
  content: "";
  position: absolute;
  background-color: #318533;
  display: block;
  width: 10em;
  height: 10em;
  border-radius: 100%;
}
.club-circle:before {
  left: -5em;
  top: 8.6em; 
}
.club-circle:after {
  left: 5em;
  top: 8.6em;
}
.club-triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 8em solid #318533;
  transform: rotate(45deg);
  border-bottom: 8em solid transparent;
  left: 6em;
  top: 8.6em;
}


/*Downloaded from https://www.codeseek.co/Szczepkowski/a-pen-by-pawel-GogZbO */
    

Comments