Singel HTML Element Heart

Since it is Valentine’s Day. Here’s a single HTML element of a heart that I’ve created.

See the Pen CSS Heart (Single element) by Christofer Vilander (@c_vilander) on CodePen.

HTML

<div class="heart"></div>

Without going into any details. What makes it possible to create a shape like this, with just one HTML element, is the use of the :before and :after pseudo-elements.

CSS

html, body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.heart {
  position: absolute;
  left: -50px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 100px;
  background: transparent;
  border-top-left-radius: 950px;
  border-bottom-left-radius: 1300px;
  transform: skew(0deg,15deg);
  box-shadow: rgba(230, 76, 69, 0.8) -7px -3px 10px -2px;
}

.heart:before {
  position: absolute;
  top: -18px;
  left: 62px;
  width: 100%;
  height: 100%;
  content: '';
  background: inherit;
  border-top-right-radius: 950px;
  border-bottom-right-radius: 1300px;
  transform: skew(0deg,-30deg);
  box-shadow: rgba(230, 76, 69, 0.8) 7px -3px 10px -2px;                       
}

.heart:after {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 0%;
  height: 0%;
  content: '#';
  color: #000;
  font-size: 70px;
  transform: skew(-1deg,-15deg);
  text-shadow: 72px 4px 3px rgba(230, 76, 69, 0.8);
}

Leave a Reply

Your email address will not be published.